Brand Icon
Shows brand logos.
- GitHub
- GitLab
- Bitbucket
- Linear
- Jira
- Atlassian
- Notion
- Figma
- Miro
- Loom
- Vercel
- Netlify
- Cloudflare
- Railway
- Supabase
- Firebase
- PostgreSQL
- MongoDB
- Docker
- npm
- Stripe
- PayPal
- Shopify
- HubSpot
- Intercom
- MailChimp
- Resend
- Sentry
- Zapier
- Airtable
- Asana
- Trello
- Gmail
- Google Drive
- Dropbox
- Zoom
- Discord
- Telegram
- X
- YouTube
- Medium
- Apple
- Anthropic
- Google Gemini
- Mistral AI
- Hugging Face
- Ollama
Installation
pnpm dlx shadcn@latest add @paneui/brand-iconUsage
Examples
Bundle size
Import each logo by name (import { siGithub } from "simple-icons"). The package is marked side-effect free, so only the logos you import reach the bundle. Avoid import * as icons and slug lookups in app code: the full set is several megabytes.
Brands that are not in the package
Brands whose owners asked for removal or never gave permission are not in the package: Microsoft and its products (Teams, Outlook, Azure, VS Code, LinkedIn, Xbox), Amazon and AWS, OpenAI, Salesforce and Slack, Adobe, Oracle and Java, IBM, Twilio and Yahoo, among others. Use the brand's own asset under its guidelines, or a neutral glyph from the icon set (the templates use one for the Codex agent)
Dark marks
With color="brand", near-black logos (GitHub, Vercel, X) switch to the foreground colour in dark mode and near-white ones do the same in light mode, so no logo disappears on either theme.
Trademarks
The logos belong to their owners. Showing one says which service a feature connects to; it does not imply endorsement. Check each brand's guidelines before using its colour or mark more prominently.
Accessibility
Without title the logo is hidden from assistive tech, which is right when a visible name sits next to it. Pass title for a logo that stands alone.
BrandIcon
One brand logo on the icon set's grid. Also accepts every prop of svg.
- icon*
- { title: string; path: string; hex?: string }
- An icon object from the package, or your own 24×24 mark in the same shape.
- color= "current"
- "current" | "brand"
- Follow the text colour, or paint the brand's colour.
- size= 18
- number
- Pixel size. Buttons, menus and icon chips size their icons themselves.
- title
- string
- Accessible name for a logo without a visible label.
- inset= true
- boolean
- Keep the icon set's 2px margin so logos sit at the same optical size as icons.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon* | { title: string; path: string; hex?: string } | — | An icon object from the package, or your own 24×24 mark in the same shape. |
| color | "current" | "brand" | "current" | Follow the text colour, or paint the brand's colour. |
| size | number | 18 | Pixel size. Buttons, menus and icon chips size their icons themselves. |
| title | string | — | Accessible name for a logo without a visible label. |
| inset | boolean | true | Keep the icon set's 2px margin so logos sit at the same optical size as icons. |
- data-brand
- The brand's name, for styling or tests.
| Data attribute | Description |
|---|---|
| data-brand | The brand's name, for styling or tests. |