@brightlocal/illustrations

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

Installation

pnpm add @brightlocal/illustrations

Categories

| Category | Description | Import path | |----------|-------------|-------------| | Illustrations | SVG illustrations with surface-type variants | @brightlocal/illustrations/illustrations/* | | Globey | Character emotion/direction variants | @brightlocal/illustrations/globey/* | | Globey Scenes | Composite character scene compositions | @brightlocal/illustrations/globey-scenes/* | | Visuals | Raster image components (JPG/PNG) | @brightlocal/illustrations/visuals/* |

Usage

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

function App() {
  return (
    <div>
      {/* Default size (250x250) */}
      <BusinessLocation />

      {/* Custom size */}
      <BusinessLocation size={400} />

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

Direct imports

You can also import from each category directly:

import { BusinessLocation } from "@brightlocal/illustrations/illustrations/business-location";
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 - Illustration size in pixels for both width and height (default: 250)
• variant - Surface-type variant: "dark" | "light" | "bright" | "white" (auto light/dark when omitted)
• className - CSS classes for additional styling

Globey Scenes & Visuals (raster)

• 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