# 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

```tsx
import {
	HeartIcon,
	UserRoundIcon,
	RocketIcon,
	CrownIcon,
	CompassIcon,
	SparklesIcon,
	FlameIcon,
	LeafIcon,
	MusicIcon,
	GemIcon,
	CameraIcon,
	MoonIcon,
	SkullIcon,
	SunIcon,
	FeatherIcon,
	AnchorIcon,
	KeyIcon,
	BellIcon,
	StarIcon,
	GiftIcon,
	CloudIcon,
	CoffeeIcon,
	ZapIcon,
	GhostIcon,
	SwordsIcon,
} from 'lucide-react';

export default function Iconography() {
	return (
		<div className="grid grid-cols-5 gap-4 place-items-center">
			<HeartIcon className="size-12" />
			<UserRoundIcon className="size-12" />
			<RocketIcon className="size-12" />
			<CrownIcon className="size-12" />
			<CompassIcon className="size-12" />
			<SparklesIcon className="size-12" />
			<FlameIcon className="size-12" />
			<LeafIcon className="size-12" />
			<MusicIcon className="size-12" />
			<GemIcon className="size-12" />
			<CameraIcon className="size-12" />
			<MoonIcon className="size-12" />
			<SkullIcon className="size-12" />
			<SunIcon className="size-12" />
			<FeatherIcon className="size-12" />
			<AnchorIcon className="size-12" />
			<KeyIcon className="size-12" />
			<BellIcon className="size-12" />
			<StarIcon className="size-12" />
			<GiftIcon className="size-12" />
			<CloudIcon className="size-12" />
			<CoffeeIcon className="size-12" />
			<ZapIcon className="size-12" />
			<GhostIcon className="size-12" />
			<SwordsIcon className="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-react" 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 */}

{/* prettier-ignore */}

* [Radix Icons](https://www.radix-ui.com/icons): features modern styles and a large selection, supports React only.
* [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.
* [HeroIcons](https://heroicons.com/): from the makers of Tailwind CSS, supports React and Vue.
* [SimpleIcons](https://simpleicons.org/): provides an excellent selection of brand icons.