Clawscale

Icons

@clawscale/react/icons holds Blueprint's UI icons, drawn on a 16px and a 20px grid. Render one by name with the Icon component, or import it as a component of its own.

Usage#

import { Icon } from "@clawscale/react";
import { DatabaseIcon, IconNames } from "@clawscale/react/icons";
<Icon icon="database" />

Browse every name in the Icons list. To render icons on the server, read Loading icons.

Examples#

Basic#

icon takes an icon name. Names are typed, so editors complete them and typos fail to compile. Components with an icon prop, such as Button and Tag, take the same names. Screen readers skip an icon unless you give it a title.

IngestTransformLoadPublishEncrypted at rest
icons/overview/basic.tsx
import { Icon } from "@clawscale/react";

const stages = [
  { icon: "import", label: "Ingest" },
  { icon: "data-lineage", label: "Transform" },
  { icon: "database", label: "Load" },
  { icon: "cloud-upload", label: "Publish" },
] as const;

export default function IconsBasic() {
  return (
    <>
      {stages.map(({ icon, label }) => (
        <span key={label} style={{ alignItems: "center", display: "inline-flex", gap: 6 }}>
          <Icon icon={icon} />
          {label}
        </span>
      ))}
      <Icon icon="lock" title="Encrypted at rest" />
    </>
  );
}

Sizes#

size sets the width and height in pixels, 16 by default. Below 20, an icon uses its 16px paths. From 20 up, it uses its 20px paths, which have more detail. IconSize.STANDARD is 16 and IconSize.LARGE is 20.

12px
16px
20px
32px
48px
icons/overview/sizes.tsx
import { Icon } from "@clawscale/react";

export default function IconsSizes() {
  return (
    <div style={{ alignItems: "flex-end", display: "flex", gap: 24 }}>
      {[12, 16, 20, 32, 48].map((size) => (
        <div key={size} style={{ display: "grid", gap: 8, justifyItems: "center" }}>
          <Icon icon="globe-network" size={size} />
          <span style={{ color: "var(--cs-color-text-muted)", fontSize: "var(--cs-font-size-xs)" }}>{size}px</span>
        </div>
      ))}
    </div>
  );
}

Intent and color#

intent colors an icon like any other component. color takes any CSS color, tokens included, and overrides intent. Without either, an icon takes the text color.

HealthyDegradedDownMaintenancePaused
icons/overview/intent.tsx
import { Icon } from "@clawscale/react";

const statuses = [
  { icon: "tick-circle", intent: "success", label: "Healthy" },
  { icon: "warning-sign", intent: "warning", label: "Degraded" },
  { icon: "error", intent: "danger", label: "Down" },
  { icon: "wrench", intent: "primary", label: "Maintenance" },
] as const;

export default function IconsIntent() {
  return (
    <>
      {statuses.map(({ icon, intent, label }) => (
        <span key={label} style={{ alignItems: "center", display: "inline-flex", gap: 6 }}>
          <Icon icon={icon} intent={intent} />
          {label}
        </span>
      ))}
      <span style={{ alignItems: "center", display: "inline-flex", gap: 6 }}>
        <Icon icon="pause" color="var(--cs-color-text-muted)" />
        Paused
      </span>
    </>
  );
}

Icon components#

Every icon is also a component, named after it with an Icon suffix: database is DatabaseIcon. Its paths ship inside the component, so it renders without loading anything, and tree-shaking bundlers keep only the icons you import. Pass it to any icon prop. Icon components take size, color and title, but not intent. The names without the suffix, such as Database, are deprecated.

warehouse-prod
icons/overview/components.tsx
import { Button, Tag } from "@clawscale/react";
import { CloudUploadIcon, DatabaseIcon, GitBranchIcon } from "@clawscale/react/icons";

export default function IconsComponents() {
  return (
    <>
      <DatabaseIcon />
      <CloudUploadIcon size={20} color="var(--cs-color-primary)" />
      <Button icon={<GitBranchIcon />} text="Create branch" />
      <Tag minimal icon={<DatabaseIcon />}>
        warehouse-prod
      </Tag>
    </>
  );
}

Icon name constants#

IconNames maps constants to names: IconNames.DataLineage is "data-lineage". Use it when you build icon maps in code. Uppercase keys, such as IconNames.DATA_LINEAGE, are the older style.

orders_raworders_dailyfinance_extract
icons/overview/icon-names.tsx
import { Code, Icon } from "@clawscale/react";
import { type IconName, IconNames } from "@clawscale/react/icons";

type JobKind = "ingest" | "transform" | "export";

const jobIcons: Record<JobKind, IconName> = {
  ingest: IconNames.Import,
  transform: IconNames.DataLineage,
  export: IconNames.Export,
};

const jobs: { name: string; kind: JobKind }[] = [
  { name: "orders_raw", kind: "ingest" },
  { name: "orders_daily", kind: "transform" },
  { name: "finance_extract", kind: "export" },
];

export default function IconsIconNames() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      {jobs.map(({ name, kind }) => (
        <span key={name} style={{ alignItems: "center", display: "flex", gap: 8 }}>
          <Icon icon={jobIcons[kind]} />
          <Code>{name}</Code>
        </span>
      ))}
    </div>
  );
}

Interactive playground#

20px paths
Props
Open dropdown
Open dropdown
Open dropdown
View source on GitHub

Props interface#

type IconProps@clawscale/react

Generic interface for the <Icon> component which may be parameterized by its root element type.

PropsDescription
autoLoad
boolean = true
Whether the component should automatically load icon contents using an async import.
Inherited from IconOwnProps
children
never
This component does not support child nodes.
Inherited from SVGIconOwnProps
className
string
A space-delimited list of class names to pass along to a child element. A space-delimited list of class names to pass along to the SVG element.
Inherited from Props
color
string
Color of icon. This is used as the fill attribute on the <svg> image so it will override any CSS color property, including that set by intent. If this prop is omitted, icon color is inherited from surrounding text.
Inherited from SVGIconOwnProps
htmlTitle
string
String for the title attribute on the rendered element, which will appear on hover as a native browser tooltip.
Inherited from SVGIconOwnProps
iconrequired
IconName | MaybeElement
Name of a Blueprint UI icon, or an icon element, to render. This prop is required because it determines the content of the component, but it can be explicitly set to falsy values to render nothing.
Inherited from IconOwnProps
intent
Intent
Visual intent color to apply to element.
Inherited from IntentProps
size
number = 16
Size of the icon, in pixels. Blueprint contains 16px and 20px SVG icon images, and chooses the appropriate resolution based on this prop.
Inherited from SVGIconOwnProps
style
React.CSSProperties
CSS style properties.
Inherited from SVGIconOwnProps
svgProps
React.HTMLAttributes<SVGElement>
Props to apply to the SVG element
Inherited from SVGIconOwnProps
tagName
keyof React.JSX.IntrinsicElements | null = "span"
HTML tag to use for the rendered element. Commonly "span" or "div". If null, no wrapper will be rendered, just the <svg> element.
Inherited from SVGIconOwnProps
title
string | false | null
Description string. This string does not appear in normal browsers, but it increases accessibility. For instance, screen readers will use it for aural feedback.
Inherited from SVGIconOwnProps

The per-icon components, such as DatabaseIcon, take these props.

type SVGIconProps@clawscale/react/icons

Interface for generated icon components which have their name and icon paths statically defined inside their JS implementation.

PropsDescription
children
never
This component does not support child nodes.
Inherited from SVGIconOwnProps
className
string
A space-delimited list of class names to pass along to the SVG element.
Inherited from SVGIconOwnProps
color
string
Color of icon. This is used as the fill attribute on the <svg> image so it will override any CSS color property, including that set by intent. If this prop is omitted, icon color is inherited from surrounding text.
Inherited from SVGIconOwnProps
htmlTitle
string
String for the title attribute on the rendered element, which will appear on hover as a native browser tooltip.
Inherited from SVGIconOwnProps
size
number = 16
Size of the icon, in pixels. Blueprint contains 16px and 20px SVG icon images, and chooses the appropriate resolution based on this prop.
Inherited from SVGIconOwnProps
style
React.CSSProperties
CSS style properties.
Inherited from SVGIconOwnProps
svgProps
React.HTMLAttributes<SVGElement>
Props to apply to the SVG element
Inherited from SVGIconOwnProps
tagName
keyof React.JSX.IntrinsicElements | null = "span"
HTML tag to use for the rendered element. Commonly "span" or "div". If null, no wrapper will be rendered, just the <svg> element.
Inherited from SVGIconOwnProps
title
string | false | null
Description string. This string does not appear in normal browsers, but it increases accessibility. For instance, screen readers will use it for aural feedback.
Inherited from SVGIconOwnProps