Iconography

Learn how to integrate Lucide for iconography in Skeleton.

Skeleton takes an agnostic approach to icons, allowing you to use any combination of SVGs, emoji, unicode, or dedicated icon libraries. Mix and match between these 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, and features a clean and modern aesthetic. All code examples provided through the Skeleton documentation website implement Lucide, but feel free to replace with any alternative.

Installation

Follow the official instructions to install Lucide for Svelte .

Usage

svelte
<script>
	import { SkullIcon } from '@lucide/svelte';
</script>

<SkullIcon color="red" class="size-8" />

Alternatives

Looking for something a bit different? Try 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.
View page on GitHub