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
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
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"
1 <nana-icon name="search" label="Search"></nana-icon> 2 <nana-icon name="user" label=""></nana-icon>
Custom SVG Content 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
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) chevron-down chevron-up chevron-left chevron-right chevron-double-left chevron-double-right chevron-double-up chevron-double-down arrow-left arrow-right arrow-up arrow-down arrow-up-right arrow-up-left arrow-down-right arrow-down-left arrow-long-left arrow-long-right arrow-long-up arrow-long-down arrow-path arrows-right-left arrows-up-down
Actions (27) plus minus close check edit trash copy save download upload filter funnel-x sort sort-ascending sort-descending search search-plus search-minus share external-link link link-slash arrows-expand arrows-collapse maximize minimize move
Status & Feedback (10) check-circle x-circle exclamation-circle exclamation-triangle information-circle question-mark-circle no-symbol ban thumb-up thumb-down
Security (8) lock lock-open key shield-check shield-exclamation fingerprint eye eye-slash
UI & Layout (16) menu menu-alt bars-3-bottom grid list table columns sidebar settings adjustments ellipsis ellipsis-vertical view-grid-add drag tag badge
User & Social (22) user user-circle user-plus user-minus user-x users user-group at identification mail mail-open inbox chat chat-bubble chat-reply paper-airplane phone phone-plus notification bell bell-slash rss
Home & Places (6) home map-pin map building building-office storefront
Media & Content (14) play pause stop skip-forward skip-back volume-up volume-off camera photo video-camera music-note microphone speaker film
Document & File (13) document document-text document-check document-plus document-minus document-duplicate folder folder-open folder-plus archive clipboard clipboard-check paperclip
Commerce & Finance (15) shopping-cart shopping-bag credit-card wallet banknotes currency-dollar currency-euro currency-pound chart chart-line chart-pie receipt gift ticket percent
Technology & Dev (20) code-bracket code-bracket-square terminal cpu server database cloud cloud-arrow-up cloud-arrow-down wifi wifi-off bluetooth qrcode device-desktop device-tablet device-phone wrench bug puzzle cube
Nature & Environment (8) sparkles sun moon globe-alt fire bolt bolt-slash leaf
Misc & Utility (19) heart star bookmark book-open calendar clock clock-plus hourglass language translate academic scissors paint-brush rocket magnet cursor variable hand-raised power
Props Attribute Type Default Description nameIconName""Named icon from the built-in set sizexs | sm | md | lg | xlmdSize preset labelstring""Accessible label. Empty string marks the icon as decorative.
Slots Slot Description (default) Custom SVG content — used when name is not provided