Deform Component

Deform icons built with CSS pseudo-elements. Supports plus, minus, close, menu, check, search, spinner, chevron, arrow and more. Color via text-* classes.

Notes

Base class: .deform. Shape class: .deform-* (e.g. .deform-plus).
Some shapes require a child element: menu*, arrow*, more-h/v, chevron*, info, warning, spinner.
Use .deform-flip to mirror chevron and arrow shapes horizontally.
Sizes: deform-2xs ~ deform-5xl.
Color: apply text-* utility classes (e.g. text-primary, text-error).

Basic usage

Default shapes

With color

With text

Add Close Confirm Search

Shapes

Basic operations

plus minus close check

Status

info warning spin search

more-h more-v

Chevron (V-shape)

start end up down

Arrow (with tail)

start end up down

Shape transitions (all → close)

→

→ /

→

Flip

→

Sizes

2xs ~ xs

sm ~ default (md)

lg ~ xl

2xl ~ 5xl

Use cases

Expand / collapse

Click to expand Expanded, click to collapse

Loading state (spinner)

Search field

Search...

Close button

tag