Reicon Brands

3456+ brand & logo SVG icons — tree-shakeable, TypeScript-ready, with official brand colors.

Install

npm i reicon-brands
# or
bun add reicon-brands

Usage (ESM)

import { Github, Figma, Discord } from 'reicon-brands';

// Create an SVG DOM element
document.body.appendChild(Github({ size: 32, color: '#181717' }));

// Use the official brand color
document.body.appendChild(Figma({ color: '#' + Figma.hex }));

// Get SVG markup as a string
const svgString = Discord.toSvg({ size: 24 });

CDN (Script Tag)

<script src="https://unpkg.com/reicon-brands/umd/reicon-brands.js"></script>
<script>
  document.body.appendChild(reiconBrands.Github({ size: 32 }));
</script>

Or use the web component CDN (cdn/reicon-brands.js):

<script src="https://cdn.reicon.dev/reicon-brands.js"></script>
<re-brand icon="github" size="32"></re-brand>
<re-brand icon="figma" size="24" color="#F24E1E"></re-brand>

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | color | string | currentColor | Icon fill color | | size | number \| string | 24 | Icon size (px when number) | | className | string | — | Additional CSS class | | attrs | object | — | Extra SVG attributes |

Brand Colors

Each icon exposes its official brand color:

import { Github } from 'reicon-brands';

console.log(Github.hex);   // "181717"
console.log(Github.title); // "GitHub"
console.log(Github.slug);  // "github"

Direct Import (smallest bundle)

import Github from 'reicon-brands/icons/Github';

Icon Names

Icons use PascalCase. Names starting with a digit are prefixed with _:

| Brand | Import | |-------|--------| | github | Github | | visual-studio-code | VisualStudioCode | | 1password | _1password | | google | Google |

TypeScript

import { Github } from 'reicon-brands';
import type { BrandIconFn, BrandIconOptions } from 'reicon-brands';

const icon: BrandIconFn = Github;
const el = icon({ size: 32, color: '#' + icon.hex });

License

MIT © devchauhan

Icon designs are trademarks of their respective owners. This package provides the SVG paths for convenience; please follow each brand's usage guidelines.