Iconography - Skeleton

  1. integrations
  2. iconography
  3. svelte

Iconography

Learn how to integrate Lucide for iconography in Skeleton.

Skeleton takes an agnostic approach to icons, meaning you can use any combination of SVGs, emoji, unicode, or dedicated icon libraries. Mix and match to fulfill your project’s unique requirements.

Lucide

If you’re looking for an opinionated solution, Skeleton recommends Lucide. This provides a huge selection of icons that are available to all popular frameworks and feature a clean and modern style. All code examples in this documentation site implement Lucide, but feel free to replace with any alternative.

Installation

Follow the official instructions to install Lucide for Svelte.

Usage

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

<script>
import IconSkull from 'lucide-svelte/icons/skull';
</script>
<IconSkull color="#ff3e98" />

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.