# Iconography

Learn how to integrate Lucide for iconography in Skeleton.

## Lucide

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
import { SkullIcon } from 'lucide-react';

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

export default App;
```

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