Icons

React icon libraries that work out of the box with Plex UI — Plex Icons, Lucide, Tabler, and Hugeicons with size and stroke conventions

Plex UI ships its own icon set and bundles compatibility with three popular open-source libraries — Lucide, Tabler, and Hugeicons. Roughly 14,750 icons across the four sets, all addressable through the same <Icon />-style React component pattern, all sized through the same --icon-size token system. Pick one to standardise on, or mix sets per surface — the size scale and stroke weight stay coherent.

Sizing & stroke

Every icon component reads the same --icon-size CSS variable, which is set automatically by parent components — a Button at size="sm" renders 16 px icons, size="md" renders 18 px, size="lg" renders 20 px. Override with <Icon style={{ '--icon-size': '24px' }} /> for one-offs, or set it on a wrapping element for a whole region.

Stroke weight is fixed per set (Plex 1.5, Lucide 2, Tabler 2, Hugeicons varies). Mixing two sets in the same screen works visually as long as the stroke weights are within ~0.5 of each other; otherwise pick one anchor set per surface.

Each library page above has the full grid plus exact import statements per icon — click through to browse and copy.

On this page