Icon

An SVG icon component backed by a built-in icon set (201 icons across 13 categories). Accepts a name attribute to render a named icon, or a default slot for custom SVG content.

Basic Usage

basic.html
html
1 <nana-icon name="home"></nana-icon>
2 <nana-icon name="user"></nana-icon>
3 <nana-icon name="settings"></nana-icon>
4 <nana-icon name="search"></nana-icon>
5 <nana-icon name="menu"></nana-icon>

Sizes

xs — 0.75rem
sm — 1rem
md — 1.25rem
lg — 1.5rem
xl — 2rem
sizes.html
html
1 <nana-icon name="home" size="xs"></nana-icon>
2 <nana-icon name="home" size="sm"></nana-icon>
3 <nana-icon name="home" size="md"></nana-icon>
4 <nana-icon name="home" size="lg"></nana-icon>
5 <nana-icon name="home" size="xl"></nana-icon>

Accessibility

With label — aria-label="Search"
Decorative — aria-hidden="true"
accessibility.html
html
1 <nana-icon name="search" label="Search"></nana-icon>
2 <nana-icon name="user" label=""></nana-icon>

Custom SVG Content

custom-svg.html
html
1 <nana-icon>
2 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
3 <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
4 </svg>
5 </nana-icon>

Styling

Primary
Success
Custom size
styling.html
html
1 <nana-icon name="home" style="color: var(--nana-color-primary-600);"></nana-icon>
2 <nana-icon name="home" style="color: var(--nana-color-success-600);"></nana-icon>
3 <nana-icon name="home" style="font-size: 2rem;"></nana-icon>

Available Icons 201 icons

Click any icon to copy its name.

Navigation (23)

Actions (27)

Status & Feedback (10)

Security (8)

UI & Layout (16)

User & Social (22)

Home & Places (6)

Media & Content (14)

Document & File (13)

Commerce & Finance (15)

Technology & Dev (20)

Nature & Environment (8)

Misc & Utility (19)

Props

Attribute Type Default Description
name IconName "" Named icon from the built-in set
size xs | sm | md | lg | xl md Size preset
label string "" Accessible label. Empty string marks the icon as decorative.

Slots

Slot Description
(default) Custom SVG content — used when name is not provided