Radix Icons
Radix Icons is a crisp set of 318 icons designed by the WorkOS team, the same team behind Radix UI — the headless component library that powers shadcn/ui and many other popular React component systems. Unlike most icon libraries that target 24x24, Radix Icons are designed at 15x15. This makes them uniquely suited for dense interfaces where space is at a premium — data tables, toolbars, dropdowns, badges, and form controls all benefit from the smaller, more precise icons. The collection is licensed under MIT; review the icon license guide for commercial-use details.
Radix Icons Specifications & Framework Compatibility
| Property | Specification Details |
|---|---|
| Total Icons | 663 vector SVG icons |
| License | MIT (Commercial & Personal Use) |
| TypeScript Support | Native .d.ts definitions included |
| Framework Support | React, Next.js, Vue, Svelte, Tailwind CSS |
| Primary NPM Package | @radix-ui/react-icons |
| Source Repository | Official GitHub Repository → |
How many icons does Radix Icons have?
Radix Icons currently includes 663 vector icons indexed in the IconSearch catalog. Every icon is available in clean SVG format with customizable stroke widths, colors, and direct multi-framework code exports for modern web applications.
Is Radix Icons free for commercial use?
Yes, Radix Icons is distributed under the MIT license. This permissive open-source license allows unrestricted commercial and personal usage in proprietary software, SaaS platforms, client websites, and digital products without licensing fees.
How do you install and use Radix Icons in React, Next.js, and Vue?
Install the package using npm install @radix-ui/react-icons, then import icons directly into your JSX, TSX, or Vue components. Alternatively, copy raw customized SVG markup directly from IconSearch with zero client-side JavaScript overhead.
// Install package
npm install @radix-ui/react-icons
// React & Next.js App Router usage
import { Accessibility } from '@radix-ui/react-icons'
export default function Header() {
return <Accessibility className="w-5 h-5 text-indigo-500" />
}Radix Icons FAQ & Technical Guide
Is Radix Icons the same as Radix UI?
No. Radix UI is a headless component library (buttons, dialogs, dropdowns etc). Radix Icons is a separate icon library by the same team. They pair well together but are independent packages.
Do I need to use Radix UI to use Radix Icons?
No. Radix Icons can be used in any React project independently of Radix UI components.
Why are Radix Icons 15x15 instead of 24x24?
The 15x15 grid was chosen to make icons sharp and precise at small sizes, which is where they are most commonly used — inside buttons, dropdowns, form fields, and toolbars.
Is Radix Icons free for commercial use?
Yes. Radix Icons uses the MIT license which allows free use in any commercial project.
Should I use Radix Icons or Lucide Icons with shadcn/ui?
shadcn/ui uses Radix Icons internally for its own components. For icons in your application content, Lucide Icons is the more common choice due to its larger icon set. Many shadcn/ui projects use both libraries together.