Icon

A Lucide glyph, inlined as SVG and drawn in currentColor.

import { Icon } from '@zitdevs/ui';

Examples

Write to us

5 min read

<span className="flex items-center gap-2">
  <Icon name="mail" /> Write to us
</span>
<Icon name="download" size={24} label="Download" className="text-primary" />

The set

The design’s set, plus instagram and linkedin. IconName is a closed union of these names, so a misspelt icon fails type-checking instead of rendering an empty box.

arrow-left
arrow-right
arrow-up-right
box
braces
calculator
check
chevron-down
chevron-left
chevron-right
circle-alert
circle-check
clock
code
copy
download
external-link
eye
file-text
filter
info
instagram
layout-template
lightbulb
link
link2
linkedin
list-checks
mail
menu
palette
search
server
share-2
trending-up
triangle-alert
wrench
x

To add one, add its inner SVG markup to iconPaths in packages/ui/src/components/atoms/icon-paths.ts under its Lucide name, and add the name to tests/icon.test.tsx.

Props

Prop	Type	Default	Notes
`name`	`IconName`	required	One of the set above.
`size`	`number`	`16`	px. The design uses 14, 16, 18 and 24.
`label`	`string`	—	Only for an icon that stands alone: adds `role="img"` and `aria-label`.
`ref`	`Ref<SVGSVGElement>`	—	The `<svg>`.
`className`	`string`	—	Colour (`text-primary`) or placement.
anything else	`<svg>` attributes	—	Except `role` and the ARIA naming attributes, which `label` decides.

Accessibility

Without label the icon is aria-hidden: beside a label it is noise to a screen reader.
With label it is an image with that name. Use it only when nothing else names what the icon does.

Without JavaScript

Inline SVG, no script, no request: it renders the same on the server and in the browser.

Theming

None of its own: it takes the colour of its text. Set a role on it or on its parent, such as text-primary.