Company Icon

A 24×24 brand-mark icon set with built-in monograms for google, meta, amazon, apple, netflix, and stripe. Extend the set per-render via glyph, or bulk-register your own brands via glyphs.

google

Installation

npx shadcn@latest add https://craftbits.dev/r/company-icon.json

Usage

import { CompanyIcon } from "@craft-bits/core";
 
<CompanyIcon company="google" size={24} />

Understanding the component

Single inline SVG. CompanyIcon renders one <svg viewBox="0 0 24 24"> and switches only the inner paths based on company. No per-icon imports — every built-in glyph travels with the component.
currentColor strokes / fills. Every built-in glyph paints with currentColor, so coloring the icon is just setting color (or a text-cb-* token) on the parent.
Registry-first API. Lookup order is glyph (one-off) → glyphs[company] (consumer registry) → COMPANY_GLYPHS[company] (built-in) → fallback → default building silhouette. Any layer can override the one below it without changing the next.
No external icon-pack dependency. The built-in monograms are hand-drawn SVG paths so consumers don't need to install simple-icons or a brand-asset SDK.

Variants / Examples

// Tint via parent color.
<span className="text-cb-accent">
  <CompanyIcon company="netflix" size={32} />
</span>
 
// Iterate the built-in set.
import { COMPANY_NAMES } from "@craft-bits/core";
 
{COMPANY_NAMES.map((c) => <CompanyIcon key={c} company={c} />)}
 
// One-off glyph for a custom company.
<CompanyIcon
  company="acme"
  glyph={<circle cx="12" cy="12" r="8" fill="currentColor" />}
/>

Props

Prop	Type	Default	Description
`company`	`string`	required	Brand key. Built-ins: `google`, `meta`, `amazon`, `apple`, `netflix`, `stripe`.
`size`	`number`	`24`	Pixel width / height.
`glyph`	`ReactNode`	—	One-off glyph override for this render. Wins over `glyphs` and built-ins.
`glyphs`	`Record<string, ReactNode>`	—	Custom glyph map merged on top of the built-in registry.
`fallback`	`ReactNode`	building silhouette	Rendered when `company` matches no registered glyph.
`accentColor`	`string`	`currentColor`	Per-render `color` override applied via inline style.
`ariaLabel`	`string \| null`	capitalised `company`	Accessible label. `null` marks the glyph decorative.
`className`	`string`	—	Extra classes merged onto the `<svg>`.

Accessibility

Defaults to role="img" with a sensible auto-generated label (Google, Meta, …). Pass ariaLabel={null} to mark the icon decorative when a sibling label already names it.
Strokes / fills inherit from currentColor, so contrast tracks the parent text color and prefers-contrast overrides apply site-wide.

Credits

Extracted from: algoflashcards (src/platform/ui/CompanyIcon.tsx). Generalised to drop the simple-icons dependency and the project-specific Company enum + brand-color map.