icon

The icon macro is used to render a single icon on the page.

Definition

{% icon(name, options = {}) %}

Input parameters

name

string represents the name of the icon to render.

options (optional)

object represents an object of icon options and attributes

Option key	Type	Default	Required	Description
options.size	string	""	no	The size of the icon. Supported sizes are: l, xl, xxl
options.filled	boolean	false	no	If set to true appropriate styling class will be added to the icon
options.noStroke	boolean	false	no	If set to true appropriate styling class will be added to the icon
options.clickable	boolean	false	no	If set to true appropriate styling class will be added to the icon
options.focusable	boolean	false	no	If set to true the icon will always be focusable
options.variant	string	false	no	The variant of the icon. Supported variants are: link, success, error
options.classNames	string	""	no	A list of additional classes added to the svg tag of the icon
options.title	string	""	no	A title attribute of the icon. Learn more about title attribute here
options.ariaLabel	string	""	no	An aria-label attribute of the icon. Learn more about aria-label here
options.ariaHidden	string	""	no	An aria-hidden attribute of the icon. Learn more about aria-hidden here
options.src	string	"/assets/img/icons/symbol-defs.svg"	no	The source of the icon. By default it is set to the default set of icons.

Example

In this example we render a basic heart icon

{% from "@macros/icon.twig" import icon %}

{{ icon('icon-heart') }}

Example

In this example we render a filled heart icon

{% from "@macros/icon.twig" import icon %}

{{ icon('icon-heart', {
    filled: true
}) }}

Example

In this example we render a clickable large heart icon with custom title and aria label

{% from "@macros/icon.twig" import icon %}

{{ icon('icon-heart', {
    clickable: true,
    size: 'l',
    title: 'A heart icon',
    ariaLabel: 'A heart icon'
}) }}

Example

In this example we render a check icon in a success variant with additional class making it visible only on mobile devices

{% from "@macros/icon.twig" import icon %}

{{ icon('icon-check', {
    variant: 'success',
    classNames: 'visible-xs-only'
}) }}

Macro source code

{% macro icon(name, options = {}) %}
    {% set iconSize = options.size ? "icon_#{options.size}" : "" %}
    {% set iconFilled = options.filled ? "icon_filled" : "" %}
    {% set iconNoStroke = options.noStroke ? "icon_no-stroke" : "" %}
    {% set iconClickable = options.clickable ? "icon_clickable" : "" %}

    {% if ObjectApi.getFeatureFlag("dev_system_icons").isEnabled %}
        {% set defaultIconsPath = systemConfig.systemIcons.paths.original ?? '/assets/img/icons/symbol-defs.svg'  %}
        {% set src = options.src ?? defaultIconsPath %}
    {% else %}
        {% set src = options.src ?? '/assets/img/icons/symbol-defs.svg' %}
    {% endif %}

    <svg class="
            icon
            {{ iconSize }}
            {{ iconFilled }}
            {{ iconNoStroke }}
            {{ iconClickable }}
            {% if options.variant %} icon_{{options.variant}} {% endif %}
            {{ options.classNames|join(' ') }}
        "
        {% if options.title %}title="{{ options.title }}"{% endif %}
        {% if options.ariaLabel %}aria-label="{{ options.ariaLabel }}"{% endif %}
        {% if options.ariaHidden %}aria-hidden="{{ options.ariaHidden }}"{% endif %}
        {% if options.focusable %}tabindex="0"{% endif %}
    >
        <use xlink:href="{{src}}#{{name}}"></use>
    </svg>
{% endmacro %}