@brightlocal/illustrations

BrightLocal Design System Illustrations - A collection of custom SVG illustrations, character scenes, and static images.

Installation

pnpm add @brightlocal/illustrations

Categories

Usage

import { SmallBusiness } from "@brightlocal/illustrations";

function App() {
  return (
    <div>
      {/* Default size: md (130x130) */}
      <SmallBusiness />

      {/* Size scale step, or a custom size */}
      <SmallBusiness size="lg" />
      <SmallBusiness size={400} />

      {/* Responsive with Tailwind */}
      <SmallBusiness className="w-64 h-64" />
    </div>
  );
}

Direct imports

You can also import from each category directly:

import { SmallBusiness } from "@brightlocal/illustrations/illustrations/small-business";
import { GlobeyCalmClosed } from "@brightlocal/illustrations/globey/globey-calm-closed";
import { GlobeyFixingFault } from "@brightlocal/illustrations/globey-scenes/globey-fixing-fault";
import { MapBackgroundDark } from "@brightlocal/illustrations/visuals/map-background-dark";

Props

Illustrations & Globey (SVG)

• size - Width and height. Illustrations: "md" (130) | "lg" (300) | px/CSS value, default "md". Globey: px/CSS value, default 250
• variant - Surface-type variant: "dark" | "white" (auto white/dark when omitted)
• className - CSS classes for additional styling

Globey Scenes & Visuals (<img>-based)

• width - Image width (default varies per component)
• height - Image height (default varies per component)
• alt - Alt text (default: "")
• Standard <img> HTML attributes

Theme Support

All SVG illustrations automatically switch between light and dark mode based on the current theme using Tailwind's dark: variant.

License

UNLICENSED