open-index/open-npm huggingface dataset:
npm package: @octopusdeploy/design-system-icons
Description: The design systems icons. This package contains the icon components extracted from SVGs in Figma.
Latest version: 2025.4.10551

# 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](https://www.octopus.design/latest/foundations/icons/system-icons-upsPwkne-upsPwkne) present in the Octopus Design System

## How it works

1. A Designer adds an icon to [Component Library → System Icons](https://www.figma.com/design/GIQ0bsTX4WBX1hDh5TiR6i/Component-Library?node-id=2129-2087&p=f&t=QbRezfsddhzNrPCA-11) page accordingly to guidelines provided on that page.
2. A Designer publishes an update using the Run GitHub Actions Workflow plugin (see [Dependencies](#dependencies)).
3. GitHub Actions [sync-and-build-icons](https://github.com/OctopusDeploy/OctopusDeploy/blob/main/.github/workflows/sync-and-build-icons.yml) 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](https://svgo.dev/)
        * transforms SVGs into React components using [SVGR](https://react-svgr.com/)
    * 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](./src/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](https://github.com/OctopusDeploy/OctopusDeploy/blob/main/frontend/packages/design-system-tokens/tokens/tokens.json#L1442).

### Icon aria labels
To ensure icons are accessible, provide a descriptive [aria label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).

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

* [Figma REST API](https://www.figma.com/developers/api)
* [Run GitHub Actions Workflow plugin for Figma](https://www.figma.com/community/plugin/1096890502176164513/run-github-actions-workflows)
* [GitHub Actions](https://github.com/features/actions)


## Contributing
The Design System Icons package is managed by the [Frontend Foundations Team](https://octopushq.atlassian.net/wiki/spaces/RND/pages/2250997828/Frontend+Foundations+Team+FFT). Please [consult us](https://octopusdeploy.slack.com/archives/C02PAUNL6J0) before making changes to this package.

If you want to add or modify an icon, follow the guidelines for [Proposing an Icon](https://www.octopus.design/932c0f1a9/p/957df8-proposing-an-icon).