brand-mark

a company's or a platform's logo, in the words' colour, from simple-icons

npx shadcn add @ag/brand-mark

Already installed? Preview an update

npx shadcn add @ag/brand-mark --dry-run

Your installed source stays unchanged until you update it. How updates work

Latest changes · 2026-10-16

New: BrandMark, a company's or a platform's logo from a simple-icons path (<BrandMark icon={siGithub} />), in the words' colour and sized by what holds it. Lucide carries no brand marks, so every logo in the registry is drawn through it.

Updated 2026-10-16 · release notes

also called logo, brand icon, social icon

shelf foundations

used by social-profile

in the words' colour

in a button's icon slot

the demo above, verbatim

brand-mark.demo.tsx

import { siGithub, siTelegram, siX, siYoutube } from "simple-icons"
import { Sample } from "@/app/samples"
import { BrandMark } from "@/registry/base-nova/ui/brand-mark"
import { Button } from "@/registry/base-nova/ui/button"

export default function BrandMarkDemo() {
  return (
    <div className="space-y-8">
      <Sample name="marks" glance title="in the words' colour">
        <div className="flex items-center gap-4 text-foreground/80">
          {[siGithub, siTelegram, siX, siYoutube].map((icon) => (
            <BrandMark key={icon.slug} icon={icon} className="size-5" />
          ))}
        </div>
      </Sample>
      <Sample name="button" title="in a button's icon slot">
        <Button icon={<BrandMark icon={siGithub} />}>
          sign in with github
        </Button>
      </Sample>
    </div>
  )
}

the source, every file an install writes

brand-mark.tsx

// A BRAND'S MARK: a company's or a platform's logo, from simple-icons' 24-unit path
// (`siGithub`, `siTelegram`: `{ path }`), filled in the current colour and sized by
// whatever holds it (a button's icon slot, a menu row, a line of words). Lucide carries
// no brand marks, by its own policy, so every logo here is drawn from simple-icons
// through this one component. Unnamed (`aria-hidden`): what holds it says the brand,
// a button's label or the words beside it.

export function BrandMark({
  icon,
  className,
}: {
  icon: { path: string }
  className?: string
}) {
  return (
    <svg
      viewBox="0 0 24 24"
      aria-hidden
      fill="currentColor"
      data-slot="brand-mark"
      className={className}
    >
      <path d={icon.path} />
    </svg>
  )
}