Icon

One icon by name, from Veneer's set.

SourcePackage @kerf-js/veneerTry it

Preview

tsx

import { Icon } from '@kerf-js/veneer'export function Sizes() {  return (  <>    <Icon      name="rocket"      size={16}    />    <Icon      name="rocket"      size={24}    />    <Icon      name="rocket"      size={32}    />    <Icon      name="rocket"      size={48}    />  </>  )}

Installation

npm install @kerf-js/veneer

Try it

Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.

Live preview

Controls

Name

Size32

Solid

Codeupdates as you change the controls

import { Icon } from '@kerf-js/veneer'<Icon name="rocket" size={32} />

Usage

tsx

import { Icon } from '@kerf-js/veneer'

Solid

solid is the filled drawing.

tsx

import { Icon } from '@kerf-js/veneer'export function Solid() {  return (  <>    <Icon      name="star"      size={32}    />    <Icon      name="star"      size={32}      solid    />    <Icon      name="bell"      size={32}    />    <Icon      name="bell"      size={32}      solid    />  </>  )}

Moving

Five icons have a part that moves: action runs it on hover, and action="on" runs it now.

tsx

import { Icon } from '@kerf-js/veneer'export function Action() {  return (  <>    <Icon      name="bell"      size={32}      action    />    <Icon      name="trash"      size={32}      action    />    <Icon      name="refresh"      size={32}      action    />    <Icon      name="check"      size={32}      action="on"    />  </>  )}

Some of the set

The icons page has them all.

tsx

import { Grid, Icon, Stack, Text } from '@kerf-js/veneer'export function Set() {  return (  <Grid    min="xs"    gap="group"  >    {LOOK.map((name) => (      <Stack        key={name}        gap="tight"        align="center"      >        <Icon          name={name}          size={24}        />        <Text          role="caption"          subtle        >          {name}        </Text>      </Stack>    ))}  </Grid>  )}const LOOK = [  'rocket',  'clock',  'server',  'globe',  'activity',  'bell',  'user',  'users',  'settings',  'database',  'cloud',  'terminal',  'shield',  'key',  'lock',  'search',  'filter',  'download',  'upload',  'external',  'copy',  'trash',  'pencil',  'star',] as const

With a meaning

Icons are hidden from screen readers. label gives one a name.

tsx

import { Icon, Row, Text } from '@kerf-js/veneer'export function Labelled() {  return (  <Row gap="related">    <Icon      name="alert-circle"      size={24}      label="Failed"    />    <Text>mobile-bff</Text>  </Row>  )}

A feature list

Use name and size to put an icon beside each line of a list.

tsx

import { Icon, Row, Stack, Text } from '@kerf-js/veneer'export function FeatureList() {  return (  <Stack gap="related">    {FACTS.map((f) => (      <Row        key={f.says}        gap="related"      >        <Icon          name={f.icon}          size={20}        />        <Text>{f.says}</Text>      </Row>    ))}  </Stack>  )}const FACTS = [  { icon: 'globe', says: 'Served from 5 regions' },  {    icon: 'shield',    says: 'Certificates renewed for you',  },  { icon: 'clock', says: 'Roll back in ten seconds' },  { icon: 'activity', says: 'Live logs on every deploy' },] as const

When to use

Use it for

A picture beside a word, or a label on a button

Reach for something else

Button, when it can be pressed: use its icon prop

Accessibility

Icons are decorative unless they have a label.

API Reference

Prop	Type	Default	Description
`name`	`IconRef`	—	Which icon, or an icon imported from `@kerf-js/veneer-icons`.
`solid`	`boolean`	`false`	The filled drawing.
`action`	`boolean \| IconTrigger`	—	Runs the moving part: `hover`, `focus`, `press` or `on`.
`label`	`string`	—	Names it for screen readers.
`size`	`string \| number`	—	Width and height, in pixels or any CSS length.
`tier`	`"quiet" \| "balanced" \| "vivid"`	—	Show this tier whatever the page's expression is.

RelatedButton Chip