Iconography

Skeleton is icon agnostic, meaning you can implement any combination of SVGs, emoji, unicode, or any dedicated icon library. You can also mix and match to fulfill your project’s unique requirements.

Lucide

If you’re looking for an opnionated option, we recommend Lucide. This provides a huge selection of icons that are available to all frameworks and feature a clean and modern design style. All code examples on this site implement Lucide, but feel free to replace these icons with any alternative.

Lucide React

Install Lucide for React

import { Camera } from 'lucide-react';

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

export default App;

Lucide Svelte

Install Lucide for Svelte

<script>
    import AlertCircle from 'lucide-svelte/icons/alert-circle';
</script>

<AlertCircle color="#ff3e98" />

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

Alternatives

• Radix Icons - provides a modern styles and large selection, but limited to React.
• Iconify - provides a vast array of icon sets pruned from 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.