Brand Icons
Brand Icons display company and platform logos with support for colored and grayscale variants. Over 65 platforms are available across categories like social, productivity, cloud, identity, and finance.
Preview
Brand Icons (65 Platforms)
Preview
Code
Social & Communication
Productivity & Collaboration
Cloud & DevOps
Identity & Security
Finance & Commerce
Mock Brands
Controls
Style:
Brand
Gray
Size:
16px
20px
24px
32px
48px
Category:
All
Social
Productivity
Cloud
Identity
Finance
Mock
Usage
import { BrandIcon } from '@versaui/ui/components/BrandIcon';
// Brand colored style
<BrandIcon platform="apple" style="brand" size="large" />
// Gray monochrome style (with hover interaction)
<BrandIcon platform="google" style="gray" size="medium" interactive />
// Custom pixel size
<BrandIcon platform="slack" style="brand" size={32} />Style Variants
Brand Style
Full-color brand logos matching official brand guidelines.
Gray Style
Monochrome gray icons that transition to a lighter gray on hover when interactive is enabled, useful for navigation menus and social links.
Available Categories
- Social & Communication: Facebook, Instagram, LinkedIn, Google, YouTube, Apple, Slack, X, WhatsApp, and more
- Productivity & Collaboration: GitHub, Figma, Atlassian, Asana, Jira, Dropbox, Salesforce, and more
- Cloud & DevOps: AWS, Google Cloud, Oracle, MongoDB, Jenkins, HashiCorp, and more
- Identity & Security: Entra ID, Okta, LDAP, SCIM, Palo Alto, CrowdStrike, and more
- Finance & Commerce: Amazon, PayPal, Visa, Mastercard, Stripe, Checkout
- Mock Brands: Versa UI, Vox, Meridia, Axus, Strivo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
platform | BrandPlatform | — | Platform identifier (e.g., github, google, slack). |
style | 'brand' | 'gray' | 'brand' | Style variant: colored or monochrome. |
size | 'small' | 'medium' | 'large' | number | 'large' | Icon size mapping or custom pixel value. |
interactive | boolean | true | Enable hover state for gray icons. |
className | string | '' | Optional CSS class. |
inlineStyle | React.CSSProperties | — | Optional inline styles. |
aria-label | string | Auto-generated | Accessible label for screen readers. |