121
GitHub
Documentation
Icon library

A familiar symbol for every action.

Search the complete Lucide set through one accessible component. Kebab-case names and aliases resolve consistently in every Lumen framework target.

Explore iconsView Icon API
Icons
1745
Frameworks
3
Component API
1

One component

Use it everywhere

Names, sizes, and accessibility props stay aligned across Astro, React, and custom elements. Decorative icons stay hidden; meaningful icons require a label.

astroAstro
---
import { Icon } from '@santi020k/lumen-astro'
---

<Icon name="search" label="Search" />
<Icon name="wand-sparkles" decorative />
<Icon name="circle-check" label="Synced" size="lg" />
---
import { Icon } from '@santi020k/lumen-astro'
---

<Icon name="search" label="Search" />
<Icon name="wand-sparkles" decorative />
<Icon name="circle-check" label="Synced" size="lg" />
tsxReact
import { Icon } from '@santi020k/lumen-react'

export const Toolbar = () => (
  <>
    <Icon name="search" label="Search" />
    <Icon name="wand-sparkles" decorative />
    <Icon name="circle-check" label="Synced" size="lg" />
  </>
)
import { Icon } from '@santi020k/lumen-react'

export const Toolbar = () => (
  <>
    <Icon name="search" label="Search" />
    <Icon name="wand-sparkles" decorative />
    <Icon name="circle-check" label="Synced" size="lg" />
  </>
)
htmlElements
<lumen-icon name="search" label="Search"></lumen-icon>
<lumen-icon name="wand-sparkles" decorative></lumen-icon>
<lumen-icon name="circle-check" label="Synced" size="lg"></lumen-icon>
<lumen-icon name="search" label="Search"></lumen-icon>
<lumen-icon name="wand-sparkles" decorative></lumen-icon>
<lumen-icon name="circle-check" label="Synced" size="lg"></lumen-icon>

Complete set

Find your icon

Search by canonical name or alias, then select any tile to copy its component name.

Showing 1745 of 1745 icons