Radix Icons

Overview

Radix Icons is a set of 318 icons drawn on a 15×15 grid by the team behind Radix UI. The odd grid is deliberate: the icons are meant to render at exactly 15px inside compact controls such as dropdown triggers, checkboxes and toolbar buttons. The set leans toward interface and editor concepts (alignment, borders, spacing, typography, components) and includes a few tool logos such as Figma, GitHub and Vercel.

At a Glance

Version examined

@radix-ui/react-icons 1.3.2

Icons in the package

318

Icons available in Icony

207 (curated)

Canvas

15×15 viewBox

Default size

width="15" height="15"

Drawing model

Filled outlines (fill="currentColor" on paths), no strokes

Rendered HomeIcon SVG

808 bytes (436 gzipped)

License

MIT

Design language

A rendered <HomeIcon /> is width="15" height="15" viewBox="0 0 15 15" with fill="none" on the root and fill="currentColor", fill-rule="evenodd" and clip-rule="evenodd" on the path. Lines are about 1 unit wide and drawn as filled outlines, so at the native 15px they are 1px lines placed to land cleanly on the pixel grid. The style is thin, square-ish and neutral, closer to a design tool’s icons than to a friendly consumer app.

Coordinates are written with five or six decimal places (M7.07926 0.222253C7.31275…). That is why a simple house is 808 bytes rendered, about double Lucide’s house, and the gear is 2,834 bytes. A Radix-style UI typically uses a handful of icons, so this rarely matters, but you’ll notice it if you inline many of them.

The catalog reflects its origin: alignment, border styles, spacing, letter case, component and frame icons sit next to general UI arrows and chevrons. There are 14 logo icons, including GitHub, Figma, Framer, Notion, Discord and Vercel.

What works and what does not

• Crisp at 15px. For chevrons in selects, checks in checkboxes and dots in menus, few sets look as clean at that size.
• A good vocabulary for editors and design tools (borders, padding, margins, opacity, transforms).
• A small API. Apart from color, props go straight to the <svg>.
• The catalog is small. 318 icons won’t cover e-commerce, media, weather or most domain concepts.
• The grid is odd. 15×15 doesn’t scale evenly to 16, 20 or 24px, so scaled icons lose their pixel alignment and can look slightly blurry.
• No stroke control and no solid set (a few icons have Filled twins, such as StarFilledIcon and HeartFilledIcon).

When Radix Icons is the wrong fit

• Your icons mostly render at 20–24px or larger. Choose a 24-grid set such as Lucide or Heroicons.
• You need more than a couple of hundred concepts, or domain icons.
• You need outline/solid pairs for navigation states.

Radix Icons vs. Heroicons vs. Lucide

Radix and Heroicons both favor a small, carefully finished catalog. Heroicons is drawn for 24px (and has redrawn 20 and 16px solid sets), while Radix is drawn for 15px.

Lucide is the usual pairing when a Radix-based UI outgrows the set. Its much larger catalog covers the gaps, but at 24px with 2px strokes it looks heavier. If the two appear side by side, render Lucide at size={15} with strokeWidth={1.5} (about 0.94px on screen, close to Radix’s 1px lines) and check the result by eye.

Installation gotchas

• There is no size prop. Pass width and height, or style the SVG with CSS. The default is a fixed 15px, not 1em, so the icon will not grow with text.
• Every name ends in Icon (HomeIcon, GearIcon), and numbered variants are common (Cross1Icon, Cross2Icon, Pencil1Icon, Pencil2Icon). Check the preview: the numbers are variants, not versions.
• The package ships all 318 icons in one ES module: react-icons.esm.js is 492,915 bytes (102,587 gzipped). Each icon is wrapped in /*#__PURE__*/, so production bundlers drop unused ones, but only with named imports. import * as Icons keeps everything.
• There is no aria-hidden by default. Add it to decorative icons and label icon-only buttons.

License: MIT, with a WorkOS notice

Radix Icons is MIT-licensed (copyright WorkOS). Commercial use, modification and redistribution are allowed; keep the notice with your source. The logo icons depict third-party trademarks, which the MIT license does not cover, so use them according to each brand’s guidelines.

Key Features

• 318 icons on a 15×15 grid
• Renders at a fixed 15×15px by default
• Strong coverage of layout, typography and editor actions
• Filled-outline drawing with even-odd cut-outs
• Single ES module with /*#__PURE__*/ annotations for tree-shaking
• MIT license

Installation

npm install @radix-ui/react-icons

Usage Example

Basic React usage with Radix Icons

import { ChevronDownIcon, CheckIcon, GearIcon } from '@radix-ui/react-icons';

export function SelectTrigger({ label }: { label: string }) {
  return (
    <button className="inline-flex items-center gap-1 text-sm">
      {label}
      {/* Native 15×15 — the size the icons are drawn for */}
      <ChevronDownIcon aria-hidden="true" />
    </button>
  );
}

// There is no size prop: use width/height
export function BigGear() {
  return <GearIcon width={30} height={30} color="#111827" aria-hidden="true" />;
}

Best For

Common Questions