Cencori logo
Cenpact

Icons

Icon libraries, sizing patterns, and brand icon usage.

Icon Sources

Lucide React (Primary)

UI icons for navigation, actions, and status.

@lobehub/icons (Brand)

Brand logos for AI providers and platforms.

OpenAIClaudeGeminiCloudflareAWSAzureGoogle

Icon Sizing

ContextClassSizeExample
Buttons (small)h-3 w-312px
Buttons (default)h-4 w-416px
Cards / Listsh-5 w-520px
Feature iconsh-6 w-624px
Hero iconsh-8 w-832px

Brand Icons with Colors

Use the .Color variant to display brand colors.

tsx
import { Cloudflare, Aws, Azure, Google, OpenAI, Claude } from "@lobehub/icons";

// Color variants (for cloud platforms)
<Cloudflare.Color size={20} />
<Aws.Color size={20} />
<Azure.Color size={20} />
<Google.Color size={20} />

// Base variants (for AI providers)
<OpenAI size={20} />
<Claude size={20} />

// Monochrome with custom color
<Cloudflare size={20} className="text-muted-foreground" />

Icons in Buttons

tsx
// Icon before text
<Button size="sm" className="h-8 text-xs rounded-full">
  <Plus className="h-3 w-3 mr-1.5" />
  Create
</Button>

// Icon after text
<Button className="h-9 px-4 rounded-full">
  Continue
  <ArrowRight className="h-3 w-3 ml-1.5" />
</Button>

// Icon only
<Button variant="ghost" size="icon" className="h-8 w-8">
  <Settings className="h-4 w-4" />
</Button>