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.

Lucide React

Install Lucide for React

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

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

export default App;

Lucide Svelte

Install Lucide for Svelte

<script>
  import IconSkull from 'lucide-svelte/icons/skull';
</script>

<IconSkull color="#ff3e98" />

TIP: For optimal performance we recommend importing each icon using the full path.

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.
• Astro Icon - provides Astro icon support for local SVGs and Iconify sets.