Icons
Inline SVG icons using currentColor. Each icon is an Astro component with a size prop. Copy the raw SVG from the gallery.
Gallery
Each icon renders as inline SVG with stroke="currentColor", so it inherits the parent's text color. Default size is 24px.
ArrowRight
Close
Sizes
Pass a size prop to scale. Icons are designed on a 24px grid — smaller sizes work well down to 16px, larger sizes up to 32px.
| Size | ArrowRight | Close | Use case |
|---|---|---|---|
| 16px | Small buttons, inline text, badges | ||
| 20px | Default buttons, form elements, nav items | ||
| 24px | Default (standalone), large buttons, headings | ||
| 32px | Feature icons, hero accents, empty states |
Color Inheritance
Icons use currentColor for stroke — set the parent's color via Tailwind text color classes. No separate icon color prop needed.
On Backgrounds
Enclose icons in a shape with a background color when used as standalone visual elements (features, empty states). Don't scale raw icons beyond 32px — use a container instead.
Inline with Text
Icons pair with text at matching sizes. Use inline-flex items-center gap-2 for alignment.