Radix Icons
Crisp 15x15 icons designed for dense UIs and dashboards
STATS
OVERVIEW
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 @radix-ui/react-icons package provides fully typed React components for all 318 icons. All icons are tree-shakable and render as inline SVGs. They accept className props and work perfectly with Tailwind CSS. The library integrates seamlessly with Radix UI components and shadcn/ui.
// VERDICTRadix Icons is a specialized tool — not a general-purpose icon library. If you are building with Radix UI or shadcn/ui, it is the natural companion. For general use, its 318 icons and 15x15 size constraint make it too limited. Pair it with Lucide Icons for broader coverage.
INSTALLATION
npm install @radix-ui/react-icons
npm install @radix-ui/react-icons // Note: Perfect for Next.js projects using shadcn/ui. Works in both Server and Client Components.
// No official Vue package. Use SVG files directly from radix-ui.com/icons
// No official Svelte package. Use SVG files directly.
// No vanilla JS package. Download SVG files from radix-ui.com/icons
CODE EXAMPLES
import { HomeIcon, GearIcon, PersonIcon } from '@radix-ui/react-icons'
export default function App() {
return (
<div>
<HomeIcon />
<GearIcon className="text-gray-500" />
<PersonIcon className="h-4 w-4" />
</div>
)
}// Perfect pairing with shadcn/ui components
import { Button } from '@/components/ui/button'
import { PlusIcon, Cross2Icon } from '@radix-ui/react-icons'
export default function Toolbar() {
return (
<div className="flex gap-2">
<Button size="sm">
<PlusIcon className="mr-1" />
Add Item
</Button>
<Button variant="ghost" size="sm">
<Cross2Icon />
</Button>
</div>
)
}import {
ChevronDownIcon,
CheckIcon,
DotFilledIcon
} from '@radix-ui/react-icons'
export default function MenuItem({ checked }: { checked: boolean }) {
return (
<div className="flex items-center gap-2 px-2 py-1.5 text-sm">
<span className="w-4">
{checked && <CheckIcon className="h-4 w-4" />}
</span>
Menu Item
<ChevronDownIcon className="ml-auto" />
</div>
)
}