Docs Kickstarter

Icons

Learn how to use and customize icons in your site using Radix Icons and custom SVG icons.

Radix Icons

We use Radix Icons as our primary icon set. These icons are designed to work seamlessly with our components.

Installation

pnpm add @radix-ui/react-icons

Basic Usage

Import and use icons directly in your components:

import {
  HomeIcon,
  PersonIcon,
  GearIcon,
  EnvelopeClosedIcon,
} from "@radix-ui/react-icons"

<HomeIcon className="h-4 w-4" />
<PersonIcon className="h-4 w-4" />
<GearIcon className="h-4 w-4" />
<EnvelopeClosedIcon className="h-4 w-4" />

Icon Sizes

Icons can be sized using width and height classes:

<HomeIcon className="h-3 w-3" /> {/* Small */}
<HomeIcon className="h-4 w-4" /> {/* Default */}
<HomeIcon className="h-5 w-5" /> {/* Medium */}
<HomeIcon className="h-6 w-6" /> {/* Large */}

Icon Colors

Icons inherit their color from the text color by default:

<HomeIcon className="h-4 w-4 text-primary" />
<HomeIcon className="h-4 w-4 text-muted-foreground" />
<HomeIcon className="h-4 w-4 text-destructive" />
<HomeIcon className="h-4 w-4 text-blue-500" />

Using Icons in Components

In Buttons

<Button>
  Next <ChevronRightIcon className="ml-2 h-4 w-4" />
</Button>

<Button variant="outline">
  <PlusIcon className="mr-2 h-4 w-4" /> Add New
</Button>

<Button variant="ghost" size="icon">
  <Cross2Icon className="h-4 w-4" />
</Button>

In Cards

Feature One

Description of feature one.

Feature Two

Description of feature two.

<Card className="p-6">
  <div className="flex items-center gap-2">
    <CheckIcon className="h-5 w-5 text-green-500" />
    <h3 className="text-xl font-semibold">Feature One</h3>
  </div>
  <p className="mt-2 text-muted-foreground">Description of feature one.</p>
</Card>

Theme Switching

<Button variant="outline" size="icon">
  <SunIcon className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
  <MoonIcon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
  <span className="sr-only">Toggle theme</span>
</Button>

Social Icons

<Button variant="outline" size="icon">
  <GitHubLogoIcon className="h-4 w-4" />
</Button>

Custom SVG Icons

You can also create custom SVG icons:

// components/icons.tsx
export const Icons = {
  logo: (props) => (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      {...props}
    >
      {/* Your SVG path */}
    </svg>
  ),
  // Add more custom icons...
}

Usage:

import { Icons } from "@/components/icons"

<Icons.logo className="h-6 w-6" />

Best Practices

  1. Accessibility

    • Add aria-label to icon-only buttons
    • Use proper semantic elements
    • Consider screen reader users

  2. Performance

    • Import icons individually
    • Use appropriate icon sizes
    • Optimize SVG icons

  3. Consistency

    • Maintain consistent icon sizes
    • Use similar style icons together
    • Follow your design system

  4. Responsive Design

    • Adjust icon sizes for different screens
    • Consider touch targets on mobile
    • Ensure proper spacing

  5. Animation

    • Add subtle transitions when appropriate
    • Don’t overuse animations
    • Consider reduced motion preferences

  6. Organization

    • Group related icons
    • Use meaningful names
    • Document icon usage