Icons

A collection of brand and UI icons available through the registry system.

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:

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

Redpanda and related brand icons. For the Redpanda company logo (horizontal, stacked, and mark lockups), use the dedicated 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.