BrandIcon
Common brand logos rendered as SVG.
Source
LLM docs
Package
npm install @plocks/brandsExamples
6
Properties
37
Playground
Basics
High-quality brand icons with multi-color support, mono variants, and automatic dark mode theming.
Loading demo…
import { Row } from '@plocks/ui';
import { BrandIcon } from '@plocks/brands';
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 { Block, Row, Text } from '@plocks/ui';
import { BrandIcon } from '@plocks/brands';
export function Demo() {
return (
<Block>
<Block>
<Text variant="small" c="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" c="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" c="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>
);
}Variants
Full preserves the brand colors; mono uses a single supplied color.
Loading demo…
import { Column, Row, Text } from '@plocks/ui';
import { BrandIcon } from '@plocks/brands';
export function Demo() {
return (
<Column gap="md">
<Row align="center" gap="sm"><BrandIcon brand="google" variant="full" size="xl" /><Text>Full color</Text></Row>
<Row align="center" gap="sm"><BrandIcon brand="google" variant="mono" color="royalblue" size="xl" /><Text>Monochrome</Text></Row>
</Column>
);
}Sizes
Size presets from small through extra large for consistent placement.
Loading demo…
import { Block, Row, Text } from '@plocks/ui';
import { BrandIcon } from '@plocks/brands';
import type { BrandIconProps } from '@plocks/brands';
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 { Row } from '@plocks/ui';
import { BrandIcon } from '@plocks/brands';
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, Grid, GridItem, Text } from '@plocks/ui';
import { BrandIcon, brandNames } from '@plocks/brands';
export function Demo() {
return (
<Grid columns={{ base: 3, sm: 4, md: 6, lg: 8 }} gap="md" fullWidth>
{brandNames.map((brand) => (
<GridItem key={brand} span={1}>
<Block align="center">
<BrandIcon brand={brand} size={36} />
<Text ta="center" size={10}>
{brand}
</Text>
</Block>
</GridItem>
))}
</Grid>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources