# Iconography
Learn how to integrate Lucide for iconography in Skeleton.

<p class="text-xl">
	Skeleton takes an agnostic approach to icons, meaning you can use any combination of SVGs, emoji, unicode, or dedicated icon libraries.
	Mix and match to fulfill your project's unique requirements.
</p>

## Lucide

<figure class="linker bg-noise">
	<div class="flex gap-4">
		<Heart size={48} />
		<UserRound size={48} />
		<Triangle size={48} />
	</div>
</figure>

If you're looking for an opinionated solution, Skeleton recommends [Lucide](https://lucide.dev/). This provides a huge selection of icons that are available to all popular frameworks and feature a clean and modern style. All code examples in this documentation site implement Lucide, but feel free to replace with any alternative.

## Installation

Follow the official instructions to install [Lucide for React](https://lucide.dev/guide/packages/lucide-react).

## Usage

```tsx

const App = () => {
	return <IconSkull color="red" size={48} />;
};

```

## Alternatives

- [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.