Icon Components — Astro

Icon Components

Reusable SVG icon components using Tabler Icons (MIT licensed) and Devicons (MIT licensed). All icons use currentColor for theming and adapt to both light and dark themes. When adding a new icon, create a component for each framework (Astro, Svelte, React, Vue, Vanilla), add it to every framework’s icons page with the same copy-to-clipboard behavior, then run pnpm build:package — see CONTRIBUTING.md for the full workflow.

Add this component

The command below includes <strong>Icons</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

bash bash Copy code

npx rizzo-css add Icons

bash bash Copy code

pnpm dlx rizzo-css add Icons

bash bash Copy code

npx rizzo-css add Icons

bash bash Copy code

bunx rizzo-css add Icons

Regular Icons (30) — Tabler Icons

These icons use currentColor and automatically adapt to your theme.

Devicons (22) — Colored Brand Icons

These icons use brand colors and are visible on both light and dark themes.

Usage

---
import Gear from '../../../components/icons/Gear.astro';
import Css3 from '../../../components/icons/devicons/Css3.astro';
---
<Gear width={20} height={20} />
<Css3 width={16} height={16} class="my-icon" />

<!-- Rizzo CSS. Inline SVG or use .icon class; currentColor for theme. -->
<span class="icon" aria-hidden="true">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">...</svg>
</span>

<script>
  import { Gear } from '$lib/rizzo/icons';
  import Css3 from '$lib/rizzo/icons/devicons/Css3.svelte';
</script>

<Gear width={20} height={20} />
<Css3 width={16} height={16} class="my-icon" />

<script setup>
import Icons from '@/components/rizzo/Icons.vue';
</script>

<template>
  <Icons />
</template>

import { Icons } from './components/react';

<Icons />

Icon Props

• width - Icon width (default: 16)
• height - Icon height (default: 16)
• class - Optional CSS class for styling

All regular icons use currentColor for theming and adapt to the current theme. Devicons use brand colors and are visible on all themes.

Other frameworks: Vanilla · Svelte · Vue · React