Icon

One icon by name, from warp's set.

SourcePackage @weft-js/warpPlayground

Preview

tsx

import { Icon } from '@weft-js/warp'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 @weft-js/warp

Usage

tsx

import { Icon } from '@weft-js/warp'<>  <Icon name="rocket" size={16} />  <Icon name="rocket" size={24} />  <Icon name="rocket" size={32} />  <Icon name="rocket" size={48} /></>

Solid

solid is the filled drawing.

tsx

import { Icon } from '@weft-js/warp'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 '@weft-js/warp'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 '@weft-js/warp'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 min = 60_000const 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 '@weft-js/warp'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 '@weft-js/warp'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

Playground

Name

Size32

Solid

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

Accessibility

Icons are decorative unless they have a label.

API Reference

Prop	Type	Default	Description
`name`	`IconRef`	—	Which icon, or an icon imported from `@weft-js/warp-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