Icons — Svelte

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.

Regular Icons (Tabler Icons)

These icons use currentColor and automatically adapt to your theme.

Devicons (Colored Brand Icons)

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

Usage

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

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.

Astro & Vanilla: Astro · Vanilla: same SVG markup and BEM; see Usage above.