Browse Learn
Icons
Use clear, consistent SVG icons to support actions, navigation, and status. Browse the collection, copy the artwork, and include only what your interface needs.
Choose a recognizable symbol
Search by name or purpose, then select an icon to copy its SVG. Aliases help you find the same drawing with familiar terms. Keep the symbol’s meaning consistent wherever it appears.
Use icons in your stack
Inline SVG works in standalone HTML and alongside React, Vue, Angular, Svelte, and Astro. Use currentColor to follow surrounding text, and size icons with the shared icon class. JSX uses attributes such as className and strokeWidth.
Make the meaning accessible
Hide decorative icons with aria-hidden="true" and focusable="false". Give icon-only buttons an accessible name on the button. Keep visible text with status messages; an icon or color alone is not enough.
Choose status shapes with care
Use check-circle for success, info-circle for information, warning-triangle for caution, and error-circle for errors. Shields suggest protection or verification. Plain symbols work well in compact controls.
Extend the collection thoughtfully
Follow the icon drawing guide: a 24px canvas, soft geometry, consistent strokes, and optical review at 16, 20, and 24px. Brand logos form a separate category with their own attribution and licensing.