### Install Radix Icons package

Source: https://github.com/radix-ui/icons/blob/main/packages/radix-icons/README.md

Use npm to add the Radix Icons library to your project dependencies.

```bash
npm install @radix-ui/react-icons
```

--------------------------------

### Navigation Icons in React

Source: https://context7.com/radix-ui/icons/llms.txt

Illustrates the usage of various navigation-related icons from Radix Icons, such as arrows, chevrons, and carets. Examples include their use in pagination controls, breadcrumb separators, sortable table headers, and dropdown triggers.

```tsx
import {
  ArrowLeftIcon,
  ArrowRightIcon,
  ArrowUpIcon,
  ArrowDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronUpIcon,
  ChevronDownIcon,
  DoubleArrowLeftIcon,
  DoubleArrowRightIcon,
  CaretDownIcon,
  CaretSortIcon,
} from "@radix-ui/react-icons";

function NavigationDemo() {
  return (
    <div>
      {/* Pagination controls */}
      <nav style={{ display: "flex", gap: "4px", alignItems: "center" }}>
        <button><DoubleArrowLeftIcon /></button>
        <button><ChevronLeftIcon /></button>
        <span>Page 1 of 10</span>
        <button><ChevronRightIcon /></button>
        <button><DoubleArrowRightIcon /></button>
      </nav>

      {/* Breadcrumb separator */}
      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
        <span>Home</span>
        <ChevronRightIcon color="#666" />
        <span>Products</span>
        <ChevronRightIcon color="#666" />
        <span>Details</span>
      </div>

      {/* Sortable table header */}
      <button style={{ display: "flex", alignItems: "center", gap: "4px" }}>
        Name <CaretSortIcon />
      </button>

      {/* Dropdown trigger */}
      <button style={{ display: "flex", alignItems: "center", gap: "4px" }}>
        Select option <CaretDownIcon />
      </button>
    </div>
  );
}
```

--------------------------------

### IconProps Interface and Ref Forwarding

Source: https://context7.com/radix-ui/icons/llms.txt

Details the `IconProps` interface, which extends standard SVG attributes and includes a `color` prop. Shows an example of using `React.forwardRef` to access and manipulate the SVG element of an icon, such as applying a transform on click.

```tsx
import type * as React from "react";

interface IconProps extends React.SVGAttributes<SVGElement> {
  children?: never;  // Icons do not accept children
  color?: string;    // Defaults to "currentColor"
}

// Usage with ref forwarding
import { useRef } from "react";
import { StarIcon } from "@radix-ui/react-icons";

function RefExample() {
  const iconRef = useRef<SVGSVGElement>(null);

  const handleClick = () => {
    if (iconRef.current) {
      iconRef.current.style.transform = "scale(1.2)";
    }
  };

  return (
    <StarIcon
      ref={iconRef}
      onClick={handleClick}
      style={{ transition: "transform 0.2s" }}
    />
  );
}
```

--------------------------------

### Generate icon library from Figma

Source: https://github.com/radix-ui/icons/blob/main/packages/generate-icon-lib/README.md

Executes the CLI tool using a specific Figma file key.

```shell
generate-icon-lib --file=<figma-file-key>
```

--------------------------------

### Generate Icon Library

Source: https://github.com/radix-ui/icons/blob/main/packages/radix-icons/CONTRIBUTING.md

Run this command to generate the icon library after making changes to Figma files or CLI code. Ensure your Figma access token is set in the .env file.

```bash
pnpm generate-src
```

--------------------------------

### Configure Figma access token

Source: https://github.com/radix-ui/icons/blob/main/packages/generate-icon-lib/README.md

Saves the Figma personal access token to an environment file for authentication.

```shell
echo "FIGMA_ACCESS_TOKEN=<token>" >> packages/radix-icons/.env
```

--------------------------------

### Basic Icon Usage in React

Source: https://context7.com/radix-ui/icons/llms.txt

Demonstrates how to import and use individual Radix Icons components in a React application. Icons can inherit color from their parent or be customized using the `color` prop. Size can be adjusted via `width` and `height` props, and standard SVG attributes can be applied.

```tsx
import { FaceIcon, SunIcon, MoonIcon, GearIcon } from "@radix-ui/react-icons";

function IconDemo() {
  return (
    <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
      {/* Basic usage - inherits color from parent */}
      <FaceIcon />

      {/* Custom color */}
      <SunIcon color="#f59e0b" />

      {/* Custom size via width/height props */}
      <MoonIcon width={24} height={24} />

      {/* With additional SVG attributes */}
      <GearIcon
        color="blue"
        style={{ cursor: "pointer" }}
        onClick={() => console.log("Settings clicked")}
      />
    </div>
  );
}
```

--------------------------------

### Implement Action Toolbar with Icons

Source: https://context7.com/radix-ui/icons/llms.txt

Use action icons like Plus, Pencil, Copy, Trash, MagnifyingGlass, and Gear for interactive elements in a toolbar. The TrashIcon can be styled with a danger color.

```tsx
import {
  PlusIcon,
  MinusIcon,
  Cross1Icon,
  Cross2Icon,
  CheckIcon,
  TrashIcon,
  Pencil1Icon,
  CopyIcon,
  DownloadIcon,
  UploadIcon,
  ReloadIcon,
  MagnifyingGlassIcon,
  GearIcon,
} from "@radix-ui/react-icons";

function ActionToolbar() {
  return (
    <div style={{ display: "flex", gap: "8px" }}>
      {/* Add button */}
      <button title="Add item">
        <PlusIcon />
      </button>

      {/* Edit button */}
      <button title="Edit">
        <Pencil1Icon />
      </button>

      {/* Copy button */}
      <button title="Copy">
        <CopyIcon />
      </button>

      {/* Delete button with danger color */}
      <button title="Delete">
        <TrashIcon color="#ef4444" />
      </button>

      {/* Search input with icon */}
      <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
        <MagnifyingGlassIcon color="#666" />
        <input type="text" placeholder="Search..." />
      </div>

      {/* Settings */}
      <button title="Settings">
        <GearIcon />
      </button>

      {/* Refresh */}
      <button title="Refresh">
        <ReloadIcon />
      </button>
    </div>
  );
}
```

--------------------------------

### Create Media Player Controls with Icons

Source: https://context7.com/radix-ui/icons/llms.txt

Integrate media control icons like Play, Pause, Shuffle, TrackPrevious, TrackNext, and Loop for audio/video players. Volume control can be managed using Speaker icons that change based on volume level.

```tsx
import {
  PlayIcon,
  PauseIcon,
  StopIcon,
  ResumeIcon,
  TrackPreviousIcon,
  TrackNextIcon,
  LoopIcon,
  ShuffleIcon,
  SpeakerLoudIcon,
  SpeakerModerateIcon,
  SpeakerQuietIcon,
  SpeakerOffIcon,
} from "@radix-ui/react-icons";

function MediaPlayer() {
  const [isPlaying, setIsPlaying] = useState(false);
  const [volume, setVolume] = useState(75);

  const VolumeIcon = volume === 0 ? SpeakerOffIcon
    : volume < 33 ? SpeakerQuietIcon
    : volume < 66 ? SpeakerModerateIcon
    : SpeakerLoudIcon;

  return (
    <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
      {/* Playback controls */}
      <button><ShuffleIcon /></button>
      <button><TrackPreviousIcon /></button>

      <button onClick={() => setIsPlaying(!isPlaying)}>
        {isPlaying ? <PauseIcon /> : <PlayIcon />}
      </button>

      <button><TrackNextIcon /></button>
      <button><LoopIcon /></button>

      {/* Volume control */}
      <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
        <VolumeIcon />
        <input
          type="range"
          min="0"
          max="100"
          value={volume}
          onChange={(e) => setVolume(Number(e.target.value))}
        />
      </div>
    </div>
  );
}
```

--------------------------------

### Individual Icon Imports

Source: https://context7.com/radix-ui/icons/llms.txt

Import icons individually from their specific module paths to optimize bundle size. This approach is recommended for tree-shaking and reducing the final application footprint.

```tsx
// Named imports from main package (tree-shakeable)
import { HomeIcon, GearIcon, PersonIcon } from "@radix-ui/react-icons";

// Individual file imports (alternative approach)
import HomeIcon from "@radix-ui/react-icons/HomeIcon";
import GearIcon from "@radix-ui/react-icons/GearIcon";
import PersonIcon from "@radix-ui/react-icons/PersonIcon";

function App() {
  return (
    <nav>
      <HomeIcon />
      <GearIcon />
      <PersonIcon />
    </nav>
  );
}
```

--------------------------------

### Complete Icon Categories Reference

Source: https://context7.com/radix-ui/icons/llms.txt

This snippet demonstrates importing multiple icons from various categories like Arrows, UI Components, File/Document, Communication, Data/Charts, and Device Icons. Use these imports to access a wide range of icons for your application.

```tsx
// Arrows and Navigation
import {
  ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowDownIcon,
  ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomLeftIcon, ArrowBottomRightIcon,
  ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon,
  DoubleArrowLeftIcon, DoubleArrowRightIcon, DoubleArrowUpIcon, DoubleArrowDownIcon,
  ThickArrowLeftIcon, ThickArrowRightIcon, ThickArrowUpIcon, ThickArrowDownIcon,
  TriangleLeftIcon, TriangleRightIcon, TriangleUpIcon, TriangleDownIcon,
  CaretLeftIcon, CaretRightIcon, CaretUpIcon, CaretDownIcon, CaretSortIcon,
} from "@radix-ui/react-icons";

// UI Components
import {
  ButtonIcon, InputIcon, SliderIcon, SwitchIcon, CheckboxIcon,
  RadiobuttonIcon, DropdownMenuIcon, AvatarIcon, BadgeIcon,
} from "@radix-ui/react-icons";

// File and Document
import {
  FileIcon, FileTextIcon, FilePlusIcon, FileMinusIcon,
  ReaderIcon, ClipboardIcon, ClipboardCopyIcon,
} from "@radix-ui/react-icons";

// Communication
import {
  EnvelopeClosedIcon, EnvelopeOpenIcon, ChatBubbleIcon,
  PaperPlaneIcon, BellIcon,
} from "@radix-ui/react-icons";

// Data and Charts
import {
  BarChartIcon, PieChartIcon, ActivityLogIcon, DashboardIcon,
  TableIcon, CalendarIcon,
} from "@radix-ui/react-icons";

// Device Icons
import {
  DesktopIcon, LaptopIcon, MobileIcon, KeyboardIcon,
  CameraIcon, VideoIcon,
} from "@radix-ui/react-icons";
```

--------------------------------

### Import and use Radix Icons in React

Source: https://github.com/radix-ui/icons/blob/main/packages/radix-icons/README.md

Import specific icon components from the library and render them within your JSX.

```js
import { FaceIcon, ImageIcon, SunIcon } from "@radix-ui/react-icons";

function MyComponent() {
	return (
		<div>
			<FaceIcon />
			<SunIcon />
			<ImageIcon />
		</div>
	);
}
```

--------------------------------

### Theme Toggle Icons

Source: https://context7.com/radix-ui/icons/llms.txt

Use SunIcon and MoonIcon for implementing dark/light mode toggles. Ensure proper styling for button appearance and icon color based on the theme state.

```tsx
import { SunIcon, MoonIcon } from "@radix-ui/react-icons";
import { useState } from "react";

function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);

  return (
    <button
      onClick={() => setIsDark(!isDark)}
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: "40px",
        height: "40px",
        borderRadius: "50%",
        border: "1px solid #ccc",
        background: isDark ? "#1f2937" : "#ffffff",
        color: isDark ? "#fbbf24" : "#374151",
        cursor: "pointer",
      }}
      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
    >
      {isDark ? <MoonIcon width={20} height={20} /> : <SunIcon width={20} height={20} />}
    </button>
  );
}
```

--------------------------------

### Interactive State Icons

Source: https://context7.com/radix-ui/icons/llms.txt

Implement toggleable states like favorites, bookmarks, and visibility using paired filled and outlined icons. Manage state with useState and conditionally render icons based on the state.

```tsx
import {
  StarIcon,
  StarFilledIcon,
  HeartIcon,
  HeartFilledIcon,
  BookmarkIcon,
  BookmarkFilledIcon,
  EyeOpenIcon,
  EyeClosedIcon,
  LockClosedIcon,
  LockOpen1Icon,
} from "@radix-ui/react-icons";
import { useState } from "react";

function InteractiveIcons() {
  const [isFavorite, setIsFavorite] = useState(false);
  const [isLiked, setIsLiked] = useState(false);
  const [isBookmarked, setIsBookmarked] = useState(false);
  const [isVisible, setIsVisible] = useState(true);
  const [isLocked, setIsLocked] = useState(true);

  return (
    <div style={{ display: "flex", gap: "16px" }}>
      {/* Star/Favorite toggle */}
      <button onClick={() => setIsFavorite(!isFavorite)}>
        {isFavorite ? (
          <StarFilledIcon color="#fbbf24" />
        ) : (
          <StarIcon />
        )}
      </button>

      {/* Heart/Like toggle */}
      <button onClick={() => setIsLiked(!isLiked)}>
        {isLiked ? (
          <HeartFilledIcon color="#ef4444" />
        ) : (
          <HeartIcon />
        )}
      </button>

      {/* Bookmark toggle */}
      <button onClick={() => setIsBookmarked(!isBookmarked)}>
        {isBookmarked ? (
          <BookmarkFilledIcon color="#3b82f6" />
        ) : (
          <BookmarkIcon />
        )}
      </button>

      {/* Visibility toggle */}
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? <EyeOpenIcon /> : <EyeClosedIcon />}
      </button>

      {/* Lock toggle */}
      <button onClick={() => setIsLocked(!isLocked)}>
        {isLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
      </button>
    </div>
  );
}
```

--------------------------------

### Display Layout and Design Icons

Source: https://context7.com/radix-ui/icons/llms.txt

Use these icons for layout controls, spacing adjustments, and design tools within an interface. Ensure icons are imported from '@radix-ui/react-icons'.

```tsx
import {
  LayoutIcon,
  GridIcon,
  ColumnsIcon,
  RowsIcon,
  LayersIcon,
  FrameIcon,
  BoxModelIcon,
  MarginIcon,
  PaddingIcon,
  DimensionsIcon,
  AspectRatioIcon,
  ZoomInIcon,
  ZoomOutIcon,
  GroupIcon,
} from "@radix-ui/react-icons";

function DesignToolbar() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "8px", padding: "8px" }}>
      {/* Layout options */}
      <div style={{ display: "flex", gap: "4px" }}>
        <button title="Layout"><LayoutIcon /></button>
        <button title="Grid"><GridIcon /></button>
        <button title="Columns"><ColumnsIcon /></button>
        <button title="Rows"><RowsIcon /></button>
      </div>

      {/* Layer controls */}
      <div style={{ display: "flex", gap: "4px" }}>
        <button title="Layers"><LayersIcon /></button>
        <button title="Frame"><FrameIcon /></button>
        <button title="Group"><GroupIcon /></button>
      </div>

      {/* Spacing controls */}
      <div style={{ display: "flex", gap: "4px" }}>
        <button title="Box Model"><BoxModelIcon /></button>
        <button title="Margin"><MarginIcon /></button>
        <button title="Padding"><PaddingIcon /></button>
      </div>

      {/* Sizing controls */}
      <div style={{ display: "flex", gap: "4px" }}>
        <button title="Dimensions"><DimensionsIcon /></button>
        <button title="Aspect Ratio"><AspectRatioIcon /></button>
        <button title="Zoom In"><ZoomInIcon /></button>
        <button title="Zoom Out"><ZoomOutIcon /></button>
      </div>
    </div>
  );
}
```

--------------------------------

### Display Text and Typography Icons

Source: https://context7.com/radix-ui/icons/llms.txt

These icons are useful for text formatting and typography controls in rich text editors. Import them from '@radix-ui/react-icons'.

```tsx
import {
  FontBoldIcon,
  FontItalicIcon,
  UnderlineIcon,
  StrikethroughIcon,
  TextAlignLeftIcon,
  TextAlignCenterIcon,
  TextAlignRightIcon,
  TextAlignJustifyIcon,
  HeadingIcon,
  FontSizeIcon,
  LetterCaseUppercaseIcon,
  ListBulletIcon,
  QuoteIcon,
  CodeIcon,
} from "@radix-ui/react-icons";

function TextEditor() {
  return (
    <div style={{ display: "flex", gap: "4px", padding: "8px", borderBottom: "1px solid #ccc" }}>
      {/* Text style group */}
      <div style={{ display: "flex", gap: "2px" }}>
        <button title="Bold"><FontBoldIcon /></button>
        <button title="Italic"><FontItalicIcon /></button>
        <button title="Underline"><UnderlineIcon /></button>
        <button title="Strikethrough"><StrikethroughIcon /></button>
      </div>

      <div style={{ width: "1px", background: "#ccc", margin: "0 8px" }} />

      {/* Alignment group */}
      <div style={{ display: "flex", gap: "2px" }}>
        <button title="Align left"><TextAlignLeftIcon /></button>
        <button title="Align center"><TextAlignCenterIcon /></button>
        <button title="Align right"><TextAlignRightIcon /></button>
        <button title="Justify"><TextAlignJustifyIcon /></button>
      </div>

      <div style={{ width: "1px", background: "#ccc", margin: "0 8px" }} />

      {/* Block elements */}
      <div style={{ display: "flex", gap: "2px" }}>
        <button title="Heading"><HeadingIcon /></button>
        <button title="Bullet list"><ListBulletIcon /></button>
        <button title="Quote"><QuoteIcon /></button>
        <button title="Code block"><CodeIcon /></button>
      </div>
    </div>
  );
}
```

--------------------------------

### Display Brand and Logo Icons

Source: https://context7.com/radix-ui/icons/llms.txt

Use these icons to represent popular platforms and services in social links or branding elements. Ensure the icons are imported from '@radix-ui/react-icons'.

```tsx
import {
  GitHubLogoIcon,
  TwitterLogoIcon,
  LinkedInLogoIcon,
  InstagramLogoIcon,
  DiscordLogoIcon,
  FigmaLogoIcon,
  VercelLogoIcon,
  CodeSandboxLogoIcon,
  NotionLogoIcon,
} from "@radix-ui/react-icons";

function SocialLinks() {
  return (
    <div style={{ display: "flex", gap: "16px" }}>
      <a href="https://github.com" title="GitHub">
        <GitHubLogoIcon width={20} height={20} />
      </a>
      <a href="https://twitter.com" title="Twitter">
        <TwitterLogoIcon width={20} height={20} />
      </a>
      <a href="https://linkedin.com" title="LinkedIn">
        <LinkedInLogoIcon width={20} height={20} />
      </a>
      <a href="https://discord.com" title="Discord">
        <DiscordLogoIcon width={20} height={20} />
      </a>
      <a href="https://instagram.com" title="Instagram">
        <InstagramLogoIcon width={20} height={20} />
      </a>
    </div>
  );
}

function DeveloperTools() {
  return (
    <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
      <span>Built with:</span>
      <FigmaLogoIcon title="Figma" />
      <VercelLogoIcon title="Vercel" />
      <CodeSandboxLogoIcon title="CodeSandbox" />
      <NotionLogoIcon title="Notion" />
    </div>
  );
}
```

--------------------------------

### Display Status Messages with Icons

Source: https://context7.com/radix-ui/icons/llms.txt

Utilize status icons such as CheckCircledIcon, CrossCircledIcon, ExclamationTriangleIcon, and InfoCircledIcon to convey success, error, warning, or informational messages. A QuestionMarkCircledIcon can be used for help tooltips.

```tsx
import {
  CheckCircledIcon,
  CrossCircledIcon,
  ExclamationTriangleIcon,
  InfoCircledIcon,
  QuestionMarkCircledIcon,
} from "@radix-ui/react-icons";

function StatusMessages() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
      {/* Success message */}
      <div style={{ display: "flex", alignItems: "center", gap: "8px", color: "#10b981" }}>
        <CheckCircledIcon />
        <span>Operation completed successfully</span>
      </div>

      {/* Error message */}
      <div style={{ display: "flex", alignItems: "center", gap: "8px", color: "#ef4444" }}>
        <CrossCircledIcon />
        <span>An error occurred</span>
      </div>

      {/* Warning message */}
      <div style={{ display: "flex", alignItems: "center", gap: "8px", color: "#f59e0b" }}>
        <ExclamationTriangleIcon />
        <span>Please review before continuing</span>
      </div>

      {/* Info message */}
      <div style={{ display: "flex", alignItems: "center", gap: "8px", color: "#3b82f6" }}>
        <InfoCircledIcon />
        <span>Here's some helpful information</span>
      </div>

      {/* Help tooltip trigger */}
      <button style={{ display: "flex", alignItems: "center", gap: "4px" }}>
        Need help? <QuestionMarkCircledIcon />
      </button>
    </div>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.