Icon
A visual symbol that can be colored in multiple ways to help emphasis content.
---
block:
_bookshop_name: elements/icon
name: moon
alt: Moon icon
options:
color: blue
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
---
{% bookshop "{{block._bookshop_name}}" bind: block %}
Properties
namestring
The name of the icon
altstring
A text description of the icon
optionsobject
Configuration options for the Divider
colorenum
The color of the icon
font-color |
|
gray |
|
red |
|
orange |
|
yellow |
|
green |
|
cyan |
|
blue |
|
purple |
|
pink |
backgroundenum
The type of background for the icon.
muted |
|
contrast |
|
none |
alignmentenum
How the icon should be horizontally aligned.
start |
|
center |
|
end |
sizeenum
The size of the icon
font-size |
|
xs |
|
s |
|
m |
|
l |
|
xl |
|
2xl |
|
3xl |
marginobject
The margin around the icon.
topenum
The top margin size.
none |
|
xs |
|
s |
|
m |
|
l |
|
xl |
|
2xl |
bottomenum
The bottom margin size.
none |
|
xs |
|
s |
|
m |
|
l |
|
xl |
|
2xl |
Examples
Sizes
---
blocks:
- _bookshop_name: elements/icon
alt: null
name: beaker
options:
color: pink
background: muted
size: font-size
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: beaker
options:
color: pink
background: muted
size: xs
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: beaker
options:
color: pink
background: muted
size: s
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: beaker
options:
color: pink
background: muted
size: m
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: beaker
options:
color: pink
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: beaker
options:
color: pink
background: muted
size: xl
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: beaker
options:
color: pink
background: muted
size: 2xl
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: beaker
options:
color: pink
background: muted
size: 3xl
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
---
<div class="flex" style="gap: 1rem;">
{% for block in blocks %}
{% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}
</div>
Alignment
---
blocks:
- _bookshop_name: elements/icon
alt: null
name: beaker
options:
color: pink
background: muted
size: null
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: start
- _bookshop_name: elements/icon
alt: null
name: beaker
options:
color: pink
background: muted
size: null
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: center
- _bookshop_name: elements/icon
alt: null
name: beaker
options:
color: pink
background: muted
size: null
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: end
---
{% for block in blocks %}
{% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}
Colors
---
blocks:
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: font-color
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: gray
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: red
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: orange
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: yellow
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: green
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: cyan
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: blue
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: purple
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: pink
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
---
<div class="flex" style="gap: 1rem;">
{% for block in blocks %}
{% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}
</div>
---
blocks:
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: font-color
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: gray
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: red
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: orange
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: yellow
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: green
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: cyan
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: blue
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: purple
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: pink
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
---
<div class="flex" style="gap: 1rem;">
{% for block in blocks %}
{% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}
</div>
---
blocks:
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: font-color
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: gray
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: red
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: orange
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: yellow
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: green
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: cyan
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: blue
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: purple
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: pink
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
---
<div class="flex" style="gap: 1rem;">
{% for block in blocks %}
{% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}
</div>
---
blocks:
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: font-color
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: gray
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: red
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: orange
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: yellow
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: green
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: cyan
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: blue
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: purple
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: pink
background: none
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
---
<div class="flex" style="gap: 1rem;">
{% for block in blocks %}
{% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}
</div>
---
blocks:
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: font-color
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: gray
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: red
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: orange
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: yellow
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: green
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: cyan
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: blue
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: purple
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: bolt
options:
color: pink
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
---
<div class="flex" style="gap: 1rem;">
{% for block in blocks %}
{% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}
</div>
---
blocks:
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: font-color
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: gray
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: red
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: orange
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: yellow
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: green
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: cyan
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: blue
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: purple
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: fill/github
options:
color: pink
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
---
<div class="flex" style="gap: 1rem;">
{% for block in blocks %}
{% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}
</div>
Backgrounds
---
blocks:
- _bookshop_name: elements/icon
alt: null
name: cloud
options:
color: blue
background: contrast
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: cloud
options:
color: blue
background: muted
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
- _bookshop_name: elements/icon
alt: null
name: cloud
options:
color: blue
background: false
size: l
max_width: null
max_height: null
margin:
top: null
bottom: null
alignment: null
---
<div class="flex" style="gap: 1rem;">
{% for block in blocks %}
{% bookshop "{{block._bookshop_name}}" bind: block %}
{% endfor %}
</div>