elementsicon

Icon

Renders an icon from a UnoCSS icon class, JSX element, or render function.

Import#

import { Icon } from 'moraine'

Slot Structure#

Icon element with no slot.

Examples#

Icon Sizes#

Numeric pixel sizes from 12 to 48.

1
function IconSizes() {
2
  const ICON_SIZES = [12, 16, 20, 24, 32, 48]
3

4
  return (
5
    <div class="flex flex-wrap gap-6 items-end">
6
      <For each={ICON_SIZES}>
7
        {(size) => (
8
          <div class="flex flex-col gap-1 items-center">
9
            <Icon name="i-lucide-star" size={size} />
10
            <span class="text-[10px] text-muted-foreground">{size}px</span>
11
          </div>
12
        )}
13
      </For>
14
    </div>
15
  )
16
}

Icon Gallery#

Common Lucide icons rendered via UnoCSS classes.

1
function IconGallery() {
2
  const ICON_NAMES = [
3
    'i-lucide-search',
4
    'i-lucide-home',
5
    'i-lucide-settings',
6
    'i-lucide-user',
7
    'i-lucide-star',
8
    'i-lucide-heart',
9
    'i-lucide-bell',
10
    'i-lucide-mail',
11
    'i-lucide-calendar',
12
    'i-lucide-folder',
13
    'i-lucide-file',
14
    'i-lucide-trash',
15
  ]
16

17
  return (
18
    <div class="gap-4 grid grid-cols-4 sm:grid-cols-6">
19
      <For each={ICON_NAMES}>
20
        {(name) => (
21
          <div class="p-3 b-1 b-border border-border rounded-lg flex flex-col gap-2 items-center">
22
            <Icon name={name} size={24} />
23
            <span class="text-[10px] text-muted-foreground truncate">
24
              {name.replace('i-lucide-', '')}
25
            </span>
26
          </div>
27
        )}
28
      </For>
29
    </div>
30
  )
31
}

Icon as JSX#

Pass a JSX element or render function instead of a string name.

1
function IconAsJSX() {
2
  return (
3
    <div class="flex flex-wrap gap-6 items-center">
4
      <div class="flex flex-col gap-1 items-center">
5
        <Icon
6
          name={
7
            <svg
8
              viewBox="0 0 24 24"
9
              width="24"
10
              height="24"
11
              fill="none"
12
              stroke="currentColor"
13
              stroke-width="2"
14
            >
15
              <circle cx="12" cy="12" r="10" />
16
              <path d="M8 14s1.5 2 4 2 4-2 4-2" />
17
              <line x1="9" y1="9" x2="9.01" y2="9" />
18
              <line x1="15" y1="9" x2="15.01" y2="9" />
19
            </svg>
20
          }
21
        />
22
        <span class="text-[10px] text-muted-foreground">JSX element</span>
23
      </div>
24
      <div class="flex flex-col gap-1 items-center">
25
        <Icon name={() => <div class="i-lucide-zap size-6" />} />
26
        <span class="text-[10px] text-muted-foreground">Render function</span>
27
      </div>
28
    </div>
29
  )
30
}

API Reference#

Props#

Prop	Type	Default	Description
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`IconT.Classes \| undefined`	—	—
name	`IconT.Name`	—	Icon source. Strings should be Uno icon classes such as `i-lucide-search` or app-config aliases such as `icon-search`. Non-string values can be JSX nodes or render functions.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
size	`string \| number \| undefined`	—	Icon size. Numbers are interpreted as px.
slotName	`string \| undefined`	`icon`	Data slot for styling.
style	`JSX.CSSProperties \| undefined`	—	—
styles	`IconT.Styles \| undefined`	—	—

ARIA#

Accessibility attributes and roles emitted by the component markup.

Attribute	Type	Default	Description
aria-hidden	`boolean \| string \| undefined`	—	Hides decorative content from assistive technology.

Data Attributes#

State and slot attributes exposed for styling hooks and selectors.

Attribute	Type	Default	Description
data-slot	`string`	—	Identifies the rendered slot for styling hooks and selectors.