@apollo/icons

This package contains a vast collection of SVG icons for use in websites that we develop. The icons are published as directories of SVG files, named according to the Icons page in our design system Figma file.

Installation

yarn add @apollo/icons

Usage

The icons are available as three different variants: default, small, and large. Your import path should take the following format:

import IconName from "@apollo/icons/{variant}/{IconName}.svg";

This package also publishes our logo, two ways. :cook: The LogoSymbol is just the Apollo "A" with an orbit around it, and the LogoType includes the name "Apollo". Import either one from the logos directory, like this:

import LogoType from "@apollo/icons/logos/LogoType.svg";
import LogoSymbol from "@apollo/icons/logos/LogoSymbol.svg";

Using the icons

The icons can be consumed in a number of ways, mostly depending on your project's build system. Below are a couple of the common ways the icons can be consumed, but if you prefer to handle icons differently, you do you!

Import as a URL

Projects built with webpack (or Next.js, Gatsby, etc.) can be configured to import image files as a URL. The image URL can then be inserted into an HTML img tag as its src property. If you're using React, it might look like this:

import iconAdd from "@apollo/icons/default/IconAdd.svg";

export const MyComponent = () => {
  return <img src={iconAdd} />;
}

Import as a React component

By using a tool like SVGR, you can convert SVG files to React components on the fly. After you configure SVGR, you can import and render the icons like this:

import IconAdd from "@apollo/icons/default/IconAdd.svg";

export const MyComponent = () => {
  return <IconAdd />;
}

The React component method is almost always preferred, since it gives you control over the color of the icon. But SVGR is very configurable! You can even configure it to combine both strategies, so you can decide whether you want to import an image URL or React component (or both).

import IconAddURL, {
  ReactComponent as IconAdd
} from "@apollo/icons/default/IconAdd.svg";

export const MyComponent = () => {
  return (
    <>
      {/* why would you ever do this? 🤷 */}
      <img src={iconAdd} />
      <IconAdd />
    </>
  );
}

Icon color

When used as React components, all icons are configured to inherit the text color of their parent element. The icon color can be changed by applying a custom color style.

import IconAdd from "@apollo/icons/default/IconAdd.svg";

export const MyComponent = () => {
  return (
    <div style={{ color: "blue" }}>
      <IconAdd />
      <IconAdd style={{ color: "red" }} />
    </div>
  );
}

Contributing

If we need to add a new icon to this package, the flow will typically look like this:

1. Locate the new icon(s) in the Figma file.
2. Export the default, small, and large variants of that icon.
3. Move those files to the appropriate directory within the src directory of this project.
4. If necessary, rename the exported files to match the name in Figma, i.e., IconAlert.svg.
5. Create a PR that includes the icon additions, and don't forget to create a changeset!
6. Follow the remaining steps in the publishing guide, and your icon(s) will be published. :rocket: