Iconography

Skeleton is icon library agnostic. This means Skeleton supports any combination of SVGs, emoji, unicode, or dedicated icon libraries. The choice is yours.

Lucide

For Skeleton’s apps and sites, we opt for Lucide. This provides a huge selection of icons, is avilable to all frameworks, and features a clean and modern style. Our code examples feature Lucide, but if you do not prefer this, simply replace 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

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

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

<AlertCircle color="#ff3e98" />

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.