Skip to content

Icon

Renders an icon from a collection.

Usage

Code
import { createSystem } from 'frog/ui'
 
const { Icon } = createSystem()
 
function Example() {
  return <Icon name="zap" />
}

Icon Properties

color

Sets the color of the icon. Defaults to 'currentColor' or the color of the icon (when mode is set to 'bg').

Code
<Icon
  color="
background
background100
background200
invert
text
text100
text200
text300
text400
gray100
gray200
gray300
gray400
gray500
gray600
gray
gray700
gray800
gray900
gray1000
blue100
blue200
blue300
blue400
blue500
blue600
blue
blue700
blue800
blue900
blue1000
red100
red200
red300
red400
red500
red600
red
red700
red800
red900
red1000
amber100
amber200
amber300
amber400
amber500
amber600
amber
amber700
amber800
amber900
amber1000
green100
green200
green300
green400
green500
green600
green
green700
green800
green900
green1000
teal100
teal200
teal300
teal400
teal500
teal600
teal
teal700
teal800
teal900
teal1000
purple100
purple200
purple300
purple400
purple500
purple600
purple
purple700
purple800
purple900
purple1000
pink100
pink200
pink300
pink400
pink500
pink600
pink
pink700
pink800
pink900
pink1000
green800"
  name="zap"
/>

mode

Sets rendering mode of the icon. Defaults to 'auto'.

Code
<Icon
  name="zap"
  
mode?: "auto" | "bg" | "mask" | undefined
Sets rendering mode of the icon.
mode="auto"
/>

collection

Icon collection to use for resolving icons. Defaults to lucide imported from 'frog/ui/icons/lucide'.

The following collections are available:

Collection is mapped to the icons property on the UI System Variables.

Code
<Icon
  name="bolt"
  
collection?: Record<string, string> | {
    readonly 'academic-cap': "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M4.26%2010.147a60.438%2060.438%200%200%200-.491%206.347A48.62%2048.62%200%200%201%2012%2020.904a48.62%2048.62%200%200%201%208.232-4.41a60.46%2060.46%200%200%200-.491-6.347m-15.482%200a50.636%2050.636%200%200%200-2.658-.813A59.906%2059.906%200%200%201%2012%203.493a59.903%2059.903%200%200%201%2010.399%205.84a51.39%2051.39%200%200%200-2.658.814m-15.482%200A50.717%2050.717%200%200%201%2012%2013.489a50.702%2050.702%200%200%201%207.74-3.342M6.75%2015a.75.75%200%201%200%200-1.5a.75.75%200%200%200%200%201.5m0%200v-3.675A55.378%2055.378%200%200%201%2012%208.443m-7.007%2011.55A5.981%205.981%200%200%200%206.75%2015.75v-1.5%22%2F%3E%3C%2Fsvg%3E";
    ... 1183 more ...;
    readonly 'x-mark-solid': "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.47%205.47a.75.75%200%200%201%201.06%200L12%2010.94l5.47-5.47a.75.75%200%201%201%201.06%201.06L13.06%2012l5.47%205.47a.75.75%200%201%201-1.06%201.06L12%2013.06l-5.47%205.47a.75.75%200%200%201-1.06-1.06L10.94%2012L5.47%206.53a.75.75%200%200%201%200-1.06%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E";
} | undefined
Icon collection to use for resolving icons.
collection={heroicons}
/>

name

Icon name in the current icon collection.

Code
<Icon
  
name: string | number | symbol
Icon name in the current icon collection.
name="bell"
/>

size

Sets the size of the icon.

Code
<Icon
  name="bell"
  size="
100%
0
1
2
3
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
52
56
60
64
72
80
96
128
160
192
224
256
48"
/>