Icons

1234 Solar icons × 6 styles + Fluent Emoji + Pixelarticons — powered by <x-i> from sparrowhawk-labs/pinion-icons.

<x-i auto> — tune-reactive (v1.1.0)

Switch the Theme/Tune picker (top-right) — these icons swap variant automatically, no reload.

home
heart
star
bell
settings-minimalistic

Variant comparison

Same icon across all 6 Solar styles + emoji / pixel virtual variants.

icon bold-duotone bold broken line-duotone linear outline emoji pixel
home
heart
user
settings
bell
trash-bin-trash

Library comparison PoC

Same concept across solar, fluent-emoji (Microsoft, MIT — flat color), pixelarticons (MIT — monochrome 8bit). 25-concept PoC; some pixel icons are semantic fallbacks.

Plain close / check / plus / minus come from solar-extra (Solar wraps them in rings).

concept solar / solar-extra (current variant) fluent-emoji pixelarticons
close close
solar-extra
close close
check check
solar-extra
check check
plus plus
solar-extra
plus plus
minus minus
solar-extra
minus minus
heart heart heart heart
star star star star
home home home home
user user user user
settings settings settings settings
bell bell bell bell
folder folder folder folder
file-text file-text file-text file-text
magnifer magnifer magnifer magnifer
cart-large cart-large cart-large cart-large
trash-bin-trash trash-bin-trash trash-bin-trash trash-bin-trash
download download download download
upload upload upload upload
pen pen pen pen
eye eye eye eye
lock lock lock lock
arrow-right arrow-right arrow-right arrow-right
arrow-left arrow-left arrow-left arrow-left
arrow-up arrow-up arrow-up arrow-up
arrow-down arrow-down arrow-down arrow-down
hamburger-menu hamburger-menu hamburger-menu hamburger-menu

All icons

Click any icon to copy its Blade snippet. Respects the variant + size above.

/
page /

Size scaling

Single heart icon at 12 / 16 / 20 / 24 / 32 / 48 / 64 px — uses current variant.

heart
12px
heart
16px
heart
20px
heart
24px
heart
32px
heart
48px
heart
64px

Color

Inline SVGs via <x-i> inherit currentColor. Apply text-* utilities.

text-red-500
text-blue-500
text-emerald-500
text-amber-500
text-purple-500
text-pink-500
text-cyan-500
text-base-content

Semantic (daisyUI) colors

text-primary
text-secondary
text-accent
text-info
text-success
text-warning
text-error