Icons

List

Here is the list of included SVG icons, you can use your own icons.

How to use

Use the dedicated shortcode {% icon '<ICON_NAME>', <ICON_SIZE> %}. Icon size is based on CSS font-size property.

• <ICON_NAME>
  • Can be a system related icon name from this list.
  • Can be a path or remote URL to a SVG or transparency raster image (PNG, AVIF)
• <ICON_SIZE> Fixed font size is optional, it must be an integer from 1 to 10.

Inherited icon size

Default icon size is 1em . The icon size is inherited, you can set your own size through the parent element font-size property, for example:

<div style="font-size: 100px">
    {% icon 'rocket' %}
</div>

Fixed icon sizes

Inherited icon size {% icon 'rocket' %}

Specified icon sizes:

{% icon 'rocket', 1 %}
{% icon 'rocket', 2 %}
{% icon 'rocket', 3 %}
{% icon 'rocket', 4 %}
{% icon 'rocket', 5 %}
{% icon 'rocket', 6 %}
{% icon 'rocket', 7 %}
{% icon 'rocket', 8 %}
{% icon 'rocket', 9 %}
{% icon 'rocket', 10 %}

Custom icon

Use you own icon! Widget supports both SVG and raster images with transparency. You can set a path or an URL as name for the icon.

Custom color

Just like icon size is related to CSS font-size property, icon color is inherited and can be customized as follows:

<div style="color: fuchsia">
    {% icon '/assets/logo-11ty.avif', 10 %}
</div>