Skeleton takes an agnostic approach to icons, allowing you to use any combination of SVGs, emoji, unicode, or dedicated icon libraries. Mix and match to fulfill your project's unique requirements.
Lucide
While Skeleton does not bundle an official icon library, we highly recommend the use of Lucide . This provides a huge selection of icons that are available to all popular frameworks, while featuring a clean and modern aesthetic. All code examples within this Skeleton documentation site have been implement using Lucide, but feel free to replace with any alternative of your choice.
Installation
Follow the official instructions to install Lucide for Svelte .
Follow the official instructions to install Lucide for React .
Usage
<script>
import { SkullIcon } from '@lucide/svelte';
</script>
<SkullIcon stroke="pink" class="size-8" />import { SkullIcon } from 'lucide-react';
export default function App() {
return <SkullIcon stroke="pink" className="size-8" />;
}Alternatives
Looking for something a bit different? Check out these other popular alternatives.
- 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.
- SimpleIcons : provides an excellent selection of brand icons.
- 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.