Design System Icons

Design System Icons is a package that encapsulates:

• an automated build process for publishing icons from Figma to GitHub
• React components for each system icon present in the Octopus Design System

How it works

1. A Designer adds an icon to Component Library → System Icons page accordingly to guidelines provided on that page.
2. A Designer publishes an update using the Run GitHub Actions Workflow plugin (see Dependencies).
3. GitHub Actions sync-and-build-icons workflow is triggered:
   • Checks out a new branch (or uses an existing one, if editing)
   • Runs scripts to synchronise and generate icons
     • optimises icons using SVGO
     • transforms SVGs into React components using SVGR
   • Creates a Pull Request
4. A Designer and Engineer review and merge the Pull Request. Icon updates are instantly available.

Usage

Importing

To use an existing icon in TypeScript, import it from the package:

import { ChevronDownIcon } from "@octopusdeploy/design-system-icons";

Next, use the icon while specifying its size:

<ChevronDownIcon size={24} />

Icon size

Icons can be sized by using the IconSize prop at 16px, 20px or 24px, as defined in IconTypes.ts.

Icon colour

By default, we use color.icon.primary for all icons. If passing a different colour to an icon using the color prop, always use icon-specific design tokens.

Icon aria labels

To ensure icons are accessible, provide a descriptive aria label.

Dependencies

The workflow of managing and publishing icons in this package depends on the following external tools and services:

• Figma REST API
• Run GitHub Actions Workflow plugin for Figma
• GitHub Actions

Contributing

The Design System Icons package is managed by the Frontend Foundations Team. Please consult us before making changes to this package.

If you want to add or modify an icon, follow the guidelines for Proposing an Icon.