Docs.
Everything you need to ship Brand Icons. Install, integrate, ship a smaller bundle, keep up with releases.
One command. Any framework.
Brand Icons ships as ESM-only npm packages, one component per icon. Pick your framework, pick your package manager — the CLI flags are identical.
$ pnpm add @brand-icons/reactRequirements
- React 19+, Vue 3.5+, Svelte 5+, or modern browser (Web Components)
- Node 18+ for bundlers
- ES Modules — no CJS fallback shipped
Packages
@brand-icons/react— React 19 components@brand-icons/vue— Vue 3.5 components@brand-icons/svelte— Svelte 5 components@brand-icons/wc— framework-agnostic Web Components
Import. Place. Style.
Every icon ships as a per-framework component with identical props — size, variant (color · mono), and an
optional year to pin a historical
millésime. Icons paint in
currentColor when
variant="mono". No CSS to load.
React
import { GitHubLatestIcon, NotionLatestIcon, LinearLatestIcon } from '@brand-icons/react';
export const Stack = () => (
<div className="stack">
<GitHubLatestIcon size={20} />
<NotionLatestIcon size={20} />
<LinearLatestIcon size={20} variant="mono" />
</div>
);Vue
<script setup>
import { GitHubLatestIcon, NotionLatestIcon, LinearLatestIcon } from '@brand-icons/vue';
</script>
<template>
<div class="stack">
<GitHubLatestIcon :size="20" />
<NotionLatestIcon :size="20" />
<LinearLatestIcon :size="20" variant="mono" />
</div>
</template>Svelte
<script>
import { GitHubLatestIcon, NotionLatestIcon, LinearLatestIcon } from '@brand-icons/svelte';
</script>
<div class="stack">
<GitHubLatestIcon size={20} />
<NotionLatestIcon size={20} />
<LinearLatestIcon size={20} variant="mono" />
</div>Web Components
<script type="module">
import '@brand-icons/wc';
</script>
<div class="stack">
<brand-icon name="github" size="20"></brand-icon>
<brand-icon name="notion" size="20"></brand-icon>
<brand-icon name="linear" size="20" variant="mono"></brand-icon>
</div>Theming via CSS
.stack { color: var(--ink); }
.stack:hover { color: var(--accent); }
/* every mono icon follows currentColor */Accessibility
<GitHubLatestIcon size={20} title="Open on GitHub" />
// title sets <title> and role="img" on the <svg>Seven props. No surprises.
Every icon component accepts the same flat prop set. The historical millésime is encoded in the
component name itself — e.g.
<Apple1976Icon /> vs
<Apple1998Icon /> — not a runtime
prop, so unused millésimes tree-shake away.
Pay for what you render.
Every package ships as ESM with "sideEffects": false and one entry per icon. Bundlers (esbuild, Rollup, Vite, Webpack 5, Rspack) drop every
icon you don't import — sizes below are minified + gzip.
// measured with esbuild · react + react-dom external · brotli ≈ 20% lower
Good — granular import
import { GitHubLatestIcon, NotionLatestIcon } from '@brand-icons/react';
// bundler keeps only the two icons + shared runtimeAvoid — namespace import
import * as Icons from '@brand-icons/react';
// referencing the namespace defeats tree-shaking — every icon shipsEvery release. No drama.
No stable release yet. Track work on GitHub .