Iconography

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.

Lucide

If you’re looking for an opinionated solution, Skeleton recommends Lucide. 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.

Usage

import { Skull as IconSkull } from 'lucide-react';

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

export default App;

Alternatives

• Radix Icons - features modern styles and a large selection, supports React only.
• Iconify - provides a vast array of icon sets supported by popular icon libraries.
• Font Awesome - provides a huge variety of icons in their free tier.
• HeroIcons - from the makers of Tailwind CSS, supports React and Vue.
• SimpleIcons - provides an excellent selection of brand icons.