BrandIcon

Common brand logos rendered as SVG

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁵⁾

Properties

⁽⁹⁾

Playground

Overview

High-quality brand icons with multi-color support, mono variants, and automatic dark mode theming.

Loading demo…

import
 
{
 
BrandIcon
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 SAMPLE_BRANDS 
}
 
from
 
'../data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
align
=
"center"
 
gap
=
"md"
 
wrap
=
"wrap"
>
      
{
SAMPLE_BRANDS
.
map
(
(
brand
)
 
=>
 
(
        
<BrandIcon
 
key
=
{
brand
}
 
brand
=
{
brand
}
 
size
=
"xl"
 
/>
      
)
)
}
    
</Row
>
  
)
;
}

Colors & Mono

Authentic brand palettes plus custom single-color overrides — passing color implies variant="mono", so the two never need to be set together.

Loading demo…

import
 
{
 
BrandIcon
,
 
Block
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Block
>
        
<Text
 
variant
=
"small"
 
color
=
"secondary"
>
          
Authentic
 brand palettes
        
</Text
>
        
<Row
 
align
=
"center"
 
gap
=
"md"
 
wrap
=
"wrap"
>
          
<BrandIcon
 
brand
=
"google"
 
size
=
"xl"
 
/>
          
<BrandIcon
 
brand
=
"facebook"
 
size
=
"xl"
 
/>
          
<BrandIcon
 
brand
=
"apple"
 
size
=
"xl"
 
/>
          
<BrandIcon
 
brand
=
"github"
 
size
=
"xl"
 
/>
          
<BrandIcon
 
brand
=
"x"
 
size
=
"xl"
 
/>
        
</Row
>
      
</Block
>
 
      
<Block
>
        
<Text
 
variant
=
"small"
 
color
=
"secondary"
>
          
Custom
 blue
        
</Text
>
        
<Row
 
align
=
"center"
 
gap
=
"md"
 
wrap
=
"wrap"
>
          
<BrandIcon
 
brand
=
"google"
 
size
=
"xl"
 
color
=
"#1976D2"
 
/>
          
<BrandIcon
 
brand
=
"facebook"
 
size
=
"xl"
 
color
=
"#1976D2"
 
/>
          
<BrandIcon
 
brand
=
"apple"
 
size
=
"xl"
 
color
=
"#1976D2"
 
/>
          
<BrandIcon
 
brand
=
"github"
 
size
=
"xl"
 
color
=
"#1976D2"
 
/>
          
<BrandIcon
 
brand
=
"x"
 
size
=
"xl"
 
color
=
"#1976D2"
 
/>
        
</Row
>
      
</Block
>
 
      
<Block
>
        
<Text
 
variant
=
"small"
 
color
=
"secondary"
>
          
Custom
 red
        
</Text
>
        
<Row
 
align
=
"center"
 
gap
=
"md"
 
wrap
=
"wrap"
>
          
<BrandIcon
 
brand
=
"google"
 
size
=
"xl"
 
color
=
"#D32F2F"
 
/>
          
<BrandIcon
 
brand
=
"facebook"
 
size
=
"xl"
 
color
=
"#D32F2F"
 
/>
          
<BrandIcon
 
brand
=
"apple"
 
size
=
"xl"
 
color
=
"#D32F2F"
 
/>
          
<BrandIcon
 
brand
=
"github"
 
size
=
"xl"
 
color
=
"#D32F2F"
 
/>
          
<BrandIcon
 
brand
=
"x"
 
size
=
"xl"
 
color
=
"#D32F2F"
 
/>
        
</Row
>
      
</Block
>
    
</Block
>
  
)
;
}

Sizes

Size presets from small through extra large for consistent placement.

Loading demo…

import
 
{
 
BrandIcon
,
 
Block
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
type
 
{
 
BrandIconProps
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
SIZES
:
 
BrandIconProps
[
'size'
]
[
]
 
=
 
[
'xs'
,
 
'sm'
,
 
'md'
,
 
'lg'
,
 
'xl'
,
 
'2xl'
,
 
'3xl'
]
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
align
=
"center"
 
gap
=
"lg"
 
wrap
=
"wrap"
>
      
{
SIZES
.
map
(
(
size
)
 
=>
 
(
        
<Block
 
key
=
{
String
(
size
)
}
 
align
=
"center"
>
          
<BrandIcon
 
brand
=
"google"
 
size
=
{
size
}
 
/>
          
<Text
 
variant
=
"small"
>
{
String
(
size
)
}
</Text
>
        
</Block
>
      
)
)
}
    
</Row
>
  
)
;
}

Dark Mode Support

Supported logos automatically invert for dark themes.

Loading demo…

import
 
{
 
BrandIcon
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 DARK_MODE_BRANDS 
}
 
from
 
'../data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
align
=
"center"
 
gap
=
"lg"
 
wrap
=
"wrap"
>
      
{
DARK_MODE_BRANDS
.
map
(
(
brand
)
 
=>
 
(
        
<BrandIcon
 
key
=
{
brand
}
 
brand
=
{
brand
}
 
size
=
"xl"
 
/>
      
)
)
}
    
</Row
>
  
)
;
}

All Available Brands

Complete collection of every supported brand icon, laid out with Grid so the column count adapts from 3 on narrow screens up to 8 on wide ones.

Loading demo…

import
 
{
 
Block
,
 
BrandIcon
,
 
Grid
,
 
GridItem
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 ALL_BRANDS 
}
 
from
 
'../data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Grid
 
columns
=
{
{
 base
:
 
3
,
 sm
:
 
4
,
 md
:
 
6
,
 lg
:
 
8
 
}
}
 
gap
=
"md"
 fullWidth
>
      
{
ALL_BRANDS
.
map
(
(
brand
)
 
=>
 
(
        
<GridItem
 
key
=
{
brand
}
 
span
=
{
1
}
>
          
<Block
 
align
=
"center"
>
            
<BrandIcon
 
brand
=
{
brand
}
 
size
=
{
36
}
 
/>
            
<Text
 
align
=
"center"
 
size
=
{
10
}
>
              
{
brand
}
            
</Text
>
          
</Block
>
        
</GridItem
>
      
)
)
}
    
</Grid
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/BrandIcon

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap