---
title: Icons
description: A collection of brand and UI icons available through the registry system.
icon: party-popper
author:
  name: malinskibeniamin
  url: https://github.com/malinskibeniamin
mode: wide
---

The Redpanda UI registry includes a comprehensive collection of icons organized by category. Each icon is available as an individual component that can be installed independently.

<ComponentPreview name="icons-demo" />

## Usage

After copying relevant icons, import and use the icons in your components:

```tsx
import AwsIcon from '@/components/redpanda-ui/aws-icon';
import GoogleIcon from '@/components/redpanda-ui/google-icon';

export function CloudProviders() {
  return (
    <div className="flex gap-4">
      <AwsIcon className="h-8 w-8" />
      <GoogleIcon className="h-8 w-8" />
    </div>
  );
}
```

## Available Icons

### Authentication & Identity

Icons for authentication providers and identity services.

- **google-icon** - Google brand icon
- **github-icon** - GitHub brand icon
- **mail-icon** - Email/mail icon
- **okta-icon** - Okta brand icon

### Cloud Providers

Icons for major cloud service providers.

- **aws-icon** - Amazon Web Services icon
- **azure-icon** - Microsoft Azure icon
- **gcp-icon** - Google Cloud Platform icon

### Frameworks & Tools

Icons for development frameworks and tools.

- **react-icon** - React framework icon
- **ts-icon** - TypeScript language icon
- **tailwind-icon** - Tailwind CSS framework icon
- **shadcn-icon** - shadcn/ui library icon
- **radix-icon** - Radix UI library icon

### UI & Components

Icons for UI categories and component types.

- **components-icon** - UI components category icon
- **primitives-icon** - UI primitives category icon
- **effects-icon** - UI effects category icon
- **motion-icon** - Motion/animation category icon
- **animateui-icon** - Animate UI library icon

### Brand

Redpanda and related brand icons. For the Redpanda company logo (horizontal, stacked, and mark lockups), use the dedicated [Redpanda Logo](/docs/redpanda-logo) component — the `RedpandaLogo` and `RedpandaIcon` exports in this collection were removed in this breaking release.

- **redpandaui-icon** - Redpanda UI brand icon
- **redpandaui-letter-icon** - Redpanda UI letter brand icon
- **mcp-icon** - MCP (Model Context Protocol) icon

## Icon Properties

All icons accept standard SVG props:

```tsx
<AwsIcon className="h-6 w-6 text-informative" aria-label="Amazon Web Services" />
```

### Common Props

- `className` - CSS classes for styling
- `width` / `height` - Size (defaults to "1em")
- `fill` / `stroke` - Colors (where applicable)
- `aria-label` - Accessibility label
- All other standard SVG element props

## Examples

### Icon Grid

Display multiple icons in a grid layout:

```tsx
import AwsIcon from '@/components/redpanda-ui/aws-icon';
import AzureIcon from '@/components/redpanda-ui/azure-icon';
import GcpIcon from '@/components/redpanda-ui/gcp-icon';

export function CloudProviderGrid() {
  return (
    <div className="grid grid-cols-3 gap-4 p-4">
      <div className="flex items-center justify-center p-4 border rounded">
        <AwsIcon className="h-12 w-12" />
      </div>
      <div className="flex items-center justify-center p-4 border rounded">
        <AzureIcon className="h-12 w-12" />
      </div>
      <div className="flex items-center justify-center p-4 border rounded">
        <GcpIcon className="h-12 w-12" />
      </div>
    </div>
  );
}
```

### Authentication Buttons

Use icons in authentication buttons:

```tsx
import GoogleIcon from '@/components/redpanda-ui/google-icon';
import GithubIcon from '@/components/redpanda-ui/github-icon';
import { Button } from '@/components/redpanda-ui/button';

export function AuthButtons() {
  return (
    <div className="flex gap-2">
      <Button variant="outline">
        <GoogleIcon className="mr-2 h-4 w-4" />
        Continue with Google
      </Button>
      <Button variant="outline">
        <GithubIcon className="mr-2 h-4 w-4" />
        Continue with GitHub
      </Button>
    </div>
  );
}
```

## Customization

Icons can be customized using CSS classes or inline styles:

```tsx
<AwsIcon className="h-8 w-8 text-brand hover:text-brand/80 transition-colors" />
```

For more complex styling, you can wrap icons in containers or use CSS-in-JS solutions.