Clearbit Design

Getting Started with Icons

This is the icon library we use for Clearbit products. It contains SVG exports of every icon used in our product designs and is actively maintained and updated by the design team.

It also generates React components for each icon in the library, which can be imported into apps using React such as Clearbit X and our Clearbit Integrations.

There are currently 4 icon sets in the library:

• Glyphs

  Global iconset for common interfaces

  18pt

• Nav

  Icons used in product sidebar menus

  22pt

• Services

  Full color icons for connected services

  18pt

• Identity

  High fidelity icons for our products

  40pt

• Indicators

  High fidelity state indicator icons

  Various pt sizes

Using ClearKit Icons

yarn add @clearkit/icons

In React apps

With @clearkit/icons v3, file-based and object imports have been removed in favor of a flat named-based export. You will need to run @clearkit/codemods/icons to update imports.

Identity, Indicators, Services, and Nav icons all have their category as a suffix. For example, SalesforceServices or SettingsNav differentiate between these icons from the glyphs versions.

You can simplify the import by using SalesforceServices as Salesforce in your import statement.

import { Add, HubspotServices, SettingsNav, SalesforceServices as Salesforce } from '@clearkit/icons';

<Add />
<HubspotServices />
<Salesforce />
<SettingsNav />

Icon component exposes 3 properties that can be defined to control the size:

• width (number | string)
• height (number | string)
• className (string)

By default the icon will be rendered at it's original size and inherit the text color of the most immediate parent element. If you wish to modify the rendered size, it's best practice to define both width and height properties, and to ensure both values are identical.

Styling Icons

In addition to being scalable, the icons in the Glpyhs and Nav sets are themeable, accepting a fill color or gradient.

In order to theme the icons your project should include ClearKit CSS (either directly or via ClearKit). The icon can then be colored by applying a class name from ClearKit CSS.

To apply a simple color from our color palette you apply a text color to either the parent or the icon element itself. By default the icon will inherit the text color of the most immediate parent.

<Icon className="text-blue" />

<div className="text-purple-600">
  <Icon />
<div>

In some scenarios, icons are colored with a gradient fill, rather than a solid fill. In these cases, your React project will need to import and render an additional component from CKIcons called CKIconGradient where these gradient fills are defined. This component needs to included only once per app, so it is recommended to include it in your root component (e.g. index.tsx or _app.tsx);

import { CKIconGradient } from '@clearkit/icons';

<CKIconGradient />;

Once <CKIconGradient /> is somewhere on the page, you can apply gradients to icons by passing a class name directly to the icon. These gradient classes are defined in ClearKit CSS and take the format .fill-gradient-direction-name, where direction is a 45 degree shorthand, and name is any of the gradient names from our color palette:

• direction (t | tr | r | br | b | bl | l | tl)
• name (blue | purple | ... | azure | malibu | ...)

<Icon className="fill-gradient-br-purple" />

If a glyph supports multiple fills (it has more than one <path> element) it is possible to target them independently using regular CSS. Otherwise, by default they will still support the regular styling behaviors mentioned above.

/* Target the base path element */
svg path.base {
  fill: gray;
}

/* Target the modifier path element */
svg path.modifier {
  fill: green;
}