# 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

You can size icons and related elements using the following utility classes:

* `size-elem-*`
* `h-elem-*`
* `w-elem-*`

> TIP: Tailwind Components (buttons, badges, chips, field sizes, etc) adjust icon size automatically for any SVG-based icons (such as Lucide). Explicitly setting the size is redudant.

```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="size-elem-xs" />
		<code class="code">xs</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-sm" />
		<code class="code">sm</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-base" />
		<code class="code preset-filled">base</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-lg" />
		<code class="code">lg</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-xl" />
		<code class="code">xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-2xl" />
		<code class="code">2xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-3xl" />
		<code class="code">3xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-4xl" />
		<code class="code">4xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-5xl" />
		<code class="code">5xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-6xl" />
		<code class="code">6xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-7xl" />
		<code class="code">7xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-8xl" />
		<code class="code">8xl</code>
	</div>
	<div class="flex flex-col items-center justify-center gap-2">
		<HeartIcon className="size-elem-9xl" />
		<code class="code">9xl</code>
	</div>
</div>

```

Icon sizes are based on Tailwind's built in `--text-*` property, which means you can match icon sizes as follows.

```html
<div class="flex items-center gap-4">
	<SomeIcon class="size-elem-{size}" />
	<div class="h-elem-{size}">...</div>
</div>
```

As well as extend with custom icon sizes as expected.

```css
:root {
	--text-10xl: --spacing(42); /* 168px */
}
```

```css
@utility icon-10xl {
	width: var(--text-10xl);
	height: var(--text-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.