Iconography

prfct uses Lucide, an open-source set of more than 1,500 consistent, 24px-grid outline icons. Components size and color icons for you; your job is to choose the right one — or none.

Sizing#

Icons are sized to the text they accompany, not to a fixed size. The stroke scales with the icon, so a 16px icon beside 14px text has the same visual weight as the letters.

Inside prfct components, never size icons yourself. Buttons, menu items, inputs and badges size their icons with [&_svg] selectors; adding size-4 only fights the system.

// Correct — the button sizes and spaces the icon
<Button>
  <PlusIcon data-icon="inline-start" />
  New project
</Button>

Color#

Icons inherit currentColor. Inside menus and inputs they default to muted-foreground and switch to foreground when the item is highlighted, so the label always leads. Status icons use their status step 11.

Guidelines#

• Pair icons with text. Icons alone are ambiguous. Use icon-only buttons only for universally understood actions (close, search, more) and always give them an aria-label and a tooltip.
• One metaphor per action. Use the same icon for the same action everywhere: Trash2 always means delete.
• Decorative icons are hidden. Icons next to a text label are decorative; Lucide renders aria-hidden="true" by default.
• Don't mix icon families. Mixed stroke widths and corner styles look accidental. If you need a brand mark Lucide doesn't have, draw it on the same 24px grid with a 2px stroke.