Icons

Library

Radix Icons is a crisp set of 300+ icons at a consistent 15px grid. They are filled (not stroked), so color is controlled entirely via currentColor — they follow the text color of their container. See the full set at radix-ui.com/icons.

Usage in React

import { ArrowRightIcon, Cross1Icon, CheckCircledIcon } from '@radix-ui/react-icons';

// Inline with text
<span>Continue <ArrowRightIcon width={14} height={14} /></span>

// In a Button
<Button intent="primary" trailingIcon={<ArrowRightIcon />}>
  Continue
</Button>

// Colored via CSS
<CheckCircledIcon style={{ color: 'var(--source-color-success)' }} />

With palettes

Icons inherit color from their container. Use semantic color tokens directly.

Navigation

Actions

Visibility

Interface

Status

People

Content

Theme