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>

Error: schema is invalid: data/properties must be object

Variants

Arrow Left
Open

Arrow Left mock data

Raw
Resolved
Arrow Right
Open

Arrow Right mock data

Raw
Resolved
Bell
Open

Bell mock data

Raw
Resolved
Caret Down
Open

Caret Down mock data

Raw
Resolved
Caret Left
Open

Caret Left mock data

Raw
Resolved
Caret Right
Open

Caret Right mock data

Raw
Resolved
Caret Up
Open

Caret Up mock data

Raw
Resolved
Circles
Open

Circles mock data

Raw
Resolved
Close
Open

Close mock data

Raw
Resolved
Copy
Open

Copy mock data

Raw
Resolved
Download
Open

Download mock data

Raw
Resolved
Eye
Open

Eye mock data

Raw
Resolved
External Link
Open

External Link mock data

Raw
Resolved
Facebook
Open

Facebook mock data

Raw
Resolved
Instagram
Open

Instagram mock data

Raw
Resolved
Law
Open

Law mock data

Raw
Resolved
Link
Open

Link mock data

Raw
Resolved
LinkedIn
Open

LinkedIn mock data

Raw
Resolved
Mail
Open

Mail mock data

Raw
Resolved
Menu
Open

Menu mock data

Raw
Resolved
Path
Open

Path mock data

Raw
Resolved
PDF
Open

PDF mock data

Raw
Resolved
Pin
Open

Pin mock data

Raw
Resolved
Print
Open

Print mock data

Raw
Resolved
RSS
Open

RSS mock data

Raw
Resolved
Search
Open

Search mock data

Raw
Resolved
Strategy
Open

Strategy mock data

Raw
Resolved
Twitter
Open

Twitter mock data

Raw
Resolved
URL
Open

URL mock data

Raw
Resolved
Warning
Open

Warning mock data

Raw
Resolved
WhatsApp
Open

WhatsApp mock data

Raw
Resolved