icon

When including the icon, set the size to be its mobile size (mobile first). Different sizes for larger screens will be set in the css file of the including component.

Information

Folder
src/components/elements/icon

Files

Schema
Mocks
Template
// src/components/elements/icon/icon.twig

<svg
	xmlns="http://www.w3.org/2000/svg"
	class="Icon Icon--{{ name }} {{ classes|join(" ") }}"
	focusable="false"
	role="img"
	{%- if not label %} aria-hidden="true"{% else %} aria-label="{{ label }}"{% endif -%}>
	<use
		xmlns:xlink="http://www.w3.org/1999/xlink"
		xlink:href="{{ (asset_path() ~ "/svg/" ~ sprite_sheet|default("icons") ~ ".sprite.svg")|with_content_hash_param ~ "#" ~ name }}"
	>
	</use>
</svg>

Variants

Chevron
Open

Chevron mock data

Raw
Resolved
Close
Open

Close mock data

Raw
Resolved
Menu
Open

Menu mock data

Raw
Resolved
Search
Open

Search mock data

Raw
Resolved