Icon

Icons from the Catnip icon set. Use for actions, status, and visual cues.

Overview

The catnip-icon component renders an icon from the @signicat/catnip-icons SVG set. Icons inherit text color via currentColor.

Icon gallery

See the Icons gallery for the full searchable icon grid.

Loading

Each icon is downloaded the first time its name is used, then reused by every catnip-icon on the page, so repeated icons render immediately. To avoid the first request for icons visible on first load, call preloadIcons(["home", "user"]) from @signicat/catnip-components at startup — see Installation — Icons and graphics loading.

Live example

Accessibility

• Default (no aria-label): the SVG is aria-hidden="true" — treat as decorative (for example beside text, or inside a button or link that already has a name).
• Standalone meaning: set aria-label — the icon is exposed with role="img" and that label.
• Ensure sufficient contrast where the icon carries meaning (WCAG AA).