Icons

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.

Usage

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

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.

• 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:

<AwsIcon 
  className="h-6 w-6 text-blue-600"
  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:

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:

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:

<AwsIcon 
  className="h-8 w-8 text-orange-500 hover:text-orange-600 transition-colors"
/>

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