Icons

Nineteen solid icons drawn for zeroUI on a 24-unit grid. Strokes end on the same slant as the slabs, corners are cut, and only things round by nature are curved.

Install

All of them, with an index to import from — or one at a time as @zeroui/icon-search, @zeroui/icon-check…

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/icons

The set

AlertIconicon-alert
ArrowLeftIconicon-arrow-left
ArrowRightIconicon-arrow-right
CheckIconicon-check
ChevronDownIconicon-chevron-down
ChevronLeftIconicon-chevron-left
ChevronRightIconicon-chevron-right
ChevronUpIconicon-chevron-up
ClearIconicon-clear
CloseIconicon-close
ExternalIconicon-external
EyeIconicon-eye
EyeOffIconicon-eye-off
InfoIconicon-info
LockIconicon-lock
MinusIconicon-minus
PlusIconicon-plus
SearchIconicon-search
SpinnerIconicon-spinner

Usage

An icon is 1.25em square and takes the text colour, so inside a button, a tab or an input it sizes and colours itself. Decorative by default; give it a title when it stands alone and means something.

tsx

import { Button } from "@/components/zero/button";import { ArrowRightIcon, AlertIcon } from "@/components/zero/icons";<Button variant="secondary">  Next job  <ArrowRightIcon /></Button><AlertIcon title="Overdue" className="text-zero-danger" />

Props

Every icon

Prop	Type	Default	Description
title	string	—	Makes the icon meaningful on its own: role="img", named by the title.
outline	boolean	false	An ink outline around the whole shape, for an icon on the accent or on an image.
className	string	—	A size-* class overrides the 1.25em; a text-* class sets the colour.

createIcon(name, shape)

Prop	Type	Default	Description
shape.d	string	—	The path, on the 24-unit grid.
shape.fillRule	"nonzero" \| "evenodd"	"nonzero"	evenodd turns overlapping paths into holes.
shape.cut	string	—	A region taken out of d, for an opening a fill rule cannot make.
shape.over	string	—	Drawn on top after the cut.