Icon

Renders an icon from Noora's shared icon catalog.

Icon web component

Renders an icon from Noora's shared icon catalog.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Animated transitions

Click each button to toggle its state and transition between paired icons.

<button data-state="closed" onclick="this.dataset.state = this.dataset.state === 'open' ? 'closed' : 'open'" aria-label="Toggle selector"><noora-icon name="selector" active-name="selector_2" transition="morph"></noora-icon></button>
<button data-state="closed" onclick="this.dataset.state = this.dataset.state === 'open' ? 'closed' : 'open'" aria-label="Toggle menu"><noora-icon name="menu" active-name="close" transition="crossfade_rotate"></noora-icon></button>
<button data-state="closed" onclick="this.dataset.state = this.dataset.state === 'open' ? 'closed' : 'open'" aria-label="Toggle theme"><noora-icon name="sun_high" active-name="moon" transition="crossfade_rotate"></noora-icon></button>
<button data-state="closed" onclick="this.dataset.state = this.dataset.state === 'open' ? 'closed' : 'open'" aria-label="Toggle playback"><noora-icon name="player_play" active-name="player_pause" transition="auto"></noora-icon></button>

Attributes

Attribute	Type or allowed values	Default	Description
`name`	string	`""`	Selects the icon by its underscore or hyphen-separated name.
`label`	string	`None`	Provides an accessible label. Omit for decorative icons.
`size`	number	`24`	Sets the width and height in pixels.
`active-name`	string	`None`	Selects the icon shown while the parent element has an open data state.
`transition`	morph, crossfade_rotate, auto	`"auto"`	Controls the animated transition between the default and active icons.

Styling parts

Name	Description
`icon`	The rendered scalable vector graphic.

Behavior

Unknown icon names render no graphic.

When active-name is set, the icon observes its parent element's data-state attribute and switches when that state is open.