Iconography

Please be aware that Skeleton is icon library agnostic. This supports any combination of SVGs, emoji, unicode, or dedicated icon libraries.

Lucide

Skeleton recommends and favors Lucide, a popular solution for most modern UI frameworks. You’ll find Lucide used within all code examples within this documentation website. If you do not wish to use Lucide, simply replace this with the solution of your choice.

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

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