Icons

Nooxit uses Phosphor through @phosphor-icons/react: 1,512 MIT-licensed icons, each drawn in six weights (thin, light, regular, bold, fill and duotone).

import { ArrowRightIcon, MagnifyingGlassIcon } from '@phosphor-icons/react/ssr';

Import from @phosphor-icons/react/ssr. The package's main entry reads a React context, which fails inside server components; the ssr entry has no context and works everywhere. Use the names that end in Icon; the unsuffixed names are deprecated and some clash with component names such as Calendar.

Lines are 1.2px thick at 16px. Phosphor has no such weight (regular is 1px at 16px, bold 1.5px), so icons use regular and the theme adds a thin outline stroke in the same color to every Phosphor icon:

svg[viewBox="0 0 256 256"] {
  stroke: currentColor;
  stroke-width: 3.2; /* 3.2 of 256 units: +0.2px at 16px */
  stroke-linejoin: round;
}

The thickness scales with the icon: 0.9px at 12px, 1.8px at 24px. Keep the default weight; set weight only for a deliberate exception, such as weight="fill" for a solid dot.

components.json sets iconLibrary to phosphor, so components added with the shadcn CLI arrive with Phosphor icons too. Find icons at phosphoricons.com.

SizingCopy Anchor Link

Components size icons for you. Every component carries a rule along the lines of [&_svg:not([class*='size-'])]:size-4, so an icon dropped into a button, menu item or input is 16px without being told. Add an explicit size-* class only when you want something other than the default.

Inline icons in buttonsCopy Anchor Link

Buttons tighten their padding on whichever side holds an icon. Mark it so they can:

<Button>
  <EnvelopeIcon data-icon="inline-start" />
  Email me
</Button>

<Button variant="outline">
  Continue
  <ArrowRightIcon data-icon="inline-end" />
</Button>

Without the attribute the icon still renders at the right size; only the padding compensation is lost.

ColorCopy Anchor Link

Icons inherit currentColor. Inside a component that means they follow the component's text color automatically — a destructive menu item's icon turns destructive without any extra class.