# Iconography

Learn about the Skeleton iconography system.

Skeleton takes an agnostic approach to icons, allowing you to use any combination of SVGs, emoji, unicode, or dedicated icon libraries. Mix and match to fulfill your project's unique requirements.

## Lucide

```svelte
<script lang="ts">
	import AnchorIcon from '@lucide/svelte/icons/anchor';
	import BellIcon from '@lucide/svelte/icons/bell';
	import CameraIcon from '@lucide/svelte/icons/camera';
	import CloudIcon from '@lucide/svelte/icons/cloud';
	import CoffeeIcon from '@lucide/svelte/icons/coffee';
	import CompassIcon from '@lucide/svelte/icons/compass';
	import CrownIcon from '@lucide/svelte/icons/crown';
	import FeatherIcon from '@lucide/svelte/icons/feather';
	import FlameIcon from '@lucide/svelte/icons/flame';
	import GemIcon from '@lucide/svelte/icons/gem';
	import GhostIcon from '@lucide/svelte/icons/ghost';
	import GiftIcon from '@lucide/svelte/icons/gift';
	import HeartIcon from '@lucide/svelte/icons/heart';
	import KeyIcon from '@lucide/svelte/icons/key';
	import LeafIcon from '@lucide/svelte/icons/leaf';
	import MoonIcon from '@lucide/svelte/icons/moon';
	import MusicIcon from '@lucide/svelte/icons/music';
	import RocketIcon from '@lucide/svelte/icons/rocket';
	import SkullIcon from '@lucide/svelte/icons/skull';
	import SparklesIcon from '@lucide/svelte/icons/sparkles';
	import StarIcon from '@lucide/svelte/icons/star';
	import SunIcon from '@lucide/svelte/icons/sun';
	import SwordsIcon from '@lucide/svelte/icons/swords';
	import UserRoundIcon from '@lucide/svelte/icons/user-round';
	import ZapIcon from '@lucide/svelte/icons/zap';
</script>

<div class="grid grid-cols-5 gap-4 place-items-center">
	<HeartIcon class="size-12" />
	<UserRoundIcon class="size-12" />
	<RocketIcon class="size-12" />
	<CrownIcon class="size-12" />
	<CompassIcon class="size-12" />
	<SparklesIcon class="size-12" />
	<FlameIcon class="size-12" />
	<LeafIcon class="size-12" />
	<MusicIcon class="size-12" />
	<GemIcon class="size-12" />
	<CameraIcon class="size-12" />
	<MoonIcon class="size-12" />
	<SkullIcon class="size-12" />
	<SunIcon class="size-12" />
	<FeatherIcon class="size-12" />
	<AnchorIcon class="size-12" />
	<KeyIcon class="size-12" />
	<BellIcon class="size-12" />
	<StarIcon class="size-12" />
	<GiftIcon class="size-12" />
	<CloudIcon class="size-12" />
	<CoffeeIcon class="size-12" />
	<ZapIcon class="size-12" />
	<GhostIcon class="size-12" />
	<SwordsIcon class="size-12" />
</div>

```

While Skeleton is icon-agnostic, we recommend [Lucide](https://lucide.dev/) for its broad framework support and clean aesthetic. All examples found on this site use Lucide, but feel free to substitute with any alternative.

<figure class="linker bg-noise">
  <a href="https://lucide.dev/guide/packages/lucide-svelte" target="_blank" class="btn preset-filled">
    Install Lucide
  </a>
</figure>

## Sizes

Use `icon-*` to apply a standard array of icon sizes.

```astro
---
import { HeartIcon } from 'lucide-react';
---

<div class="grid grid-cols-[repeat(auto-fit,12rem)] auto-rows-[12rem] place-content-center w-full">
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-xs" />
		<span class="badge preset-tonal">xs</span>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-sm" />
		<span class="badge preset-tonal">sm</span>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-base" />
		<span class="badge preset-filled">base</span>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-lg" />
		<span class="badge preset-tonal">lg</span>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-xl" />
		<span class="badge preset-tonal">xl</span>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-2xl" />
		<span class="badge preset-tonal">2xl</span>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-3xl" />
		<span class="badge preset-tonal">3xl</span>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-4xl" />
		<span class="badge preset-tonal">4xl</span>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-5xl" />
		<span class="badge preset-tonal">5xl</span>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-6xl" />
		<span class="badge preset-tonal">6xl</span>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-7xl" />
		<span class="badge preset-tonal">7xl</span>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-8xl" />
		<span class="badge preset-tonal">8xl</span>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="icon-9xl" />
		<span class="badge preset-tonal">9xl</span>
	</div>
</div>

```

Extend with custom sizes:

```css
:root {
	--element-size-10xl: --spacing(48);
}
```

```css
@utility icon-10xl {
	width: var(--element-size-10xl);
	height: var(--element-size-10xl);
}
```

## Alternatives

Looking for something a bit different? Check out these other popular alternatives.

{/* prettier-ignore */}

* [Iconify](https://iconify.design/): provides a vast array of icon sets supported by popular icon libraries.
* [Font Awesome](https://fontawesome.com/): provides a huge variety of icons in their free tier.
* [SimpleIcons](https://simpleicons.org/): provides an excellent selection of brand icons.

{/* prettier-ignore */}