Icon

Renders a vector icon powered by the Iconify library.

Plume uses the Iconify ecosystem, giving you access to over 200,000 icons from sets like Fluent, Lucide, Material Design, and more.

Finding Icons

You can search for icons on the official Iconify API Explorer. Plume is pre-configured to work with the CSS-based Iconify implementation, which is extremely lightweight and requires no client-side JavaScript for rendering.

Naming Convention

Icons in Plume follow a specific CSS class format:

icon-[{set}--{name}]
  • set: The icon set prefix (e.g., fluent, lucide, mdi)
  • name: The specific icon name within that set

Examples

Icon Varieties

Fluent Home
Lucide Settings
MDI Account
Animated
blade 
<div class="flex flex-wrap gap-8 items-center">
    <div class="flex flex-col items-center gap-2">
        <x-plume::icon i="icon-[fluent--home-24-regular]" class="size-6" />
        <span class="text-xs text-foreground/50 dark:text-background-400">Fluent
            Home</span>
    </div>
    <div class="flex flex-col items-center gap-2">
        <x-plume::icon i="icon-[lucide--settings]" class="size-6 text-primary" />
        <span class="text-xs text-foreground/50 dark:text-background-400">Lucide
            Settings</span>
    </div>
    <div class="flex flex-col items-center gap-2">
        <x-plume::icon i="icon-[mdi--account]" class="size-8" />
        <span class="text-xs text-foreground/50 dark:text-background-400">MDI
            Account</span>
    </div>
    <div class="flex flex-col items-center gap-2">
        <x-plume::icon i="icon-[fluent--arrow-sync-24-regular]" class="size-6 animate-spin" />
        <span class="text-xs text-foreground/50 dark:text-background-400">Animated</span>
    </div>
</div>
Prop Type Default Description
i string null The full icon name (e.g., 'icon-[fluent--save-24-regular]').

Usage

blade 
<x-plume::icon i="icon-[fluent--home-24-regular]" />
                <x-plume::icon i="icon-[lucide--settings]" class="size-6 text-primary"
                />

Styling

Since icons are rendered as CSS background images with mask properties, you can easily style them using standard Tailwind utility classes for size and color.

blade 
<!-- Sizing -->
                <x-plume::icon i="icon-[fluent--star-24-filled]" class="size-4" />
                <x-plume::icon i="icon-[fluent--star-24-filled]" class="size-12" />

                <!-- Coloring -->
                <x-plume::icon i="icon-[fluent--heart-24-filled]" class="text-rose-500" />
                <x-plume::icon i="icon-[fluent--info-24-filled]" class="text-primary"
                />