@mergifyio/icons

Mergify's product icons as raw SVG files. Each icon ships in currentColor so the consumer controls the color through CSS — see the suggested brand color per product below.

Icons

| File | Suggested brand color | viewBox | |---|---|---| | merge-queue.svg | #2AA77E (teal) | 0 0 40 40 | | merge-protections.svg | #2086C5 (blue) | 0 0 40 40 | | ci-insights.svg | #5C68F0 (indigo) | 0 0 40 40 | | test-insights.svg | #9C43E5 (purple) | 0 0 40 40 | | stacks.svg | #E61E71 (rose) | 0 0 32 32 | | quarantined-healthy.svg | #17B26A (success green) | 0 0 24 24 | | quarantined-flaky.svg | #F79009 (warning orange) | 0 0 24 24 | | quarantined-broken.svg | #F04438 (error red) | 0 0 24 24 |

Install

pnpm add @mergifyio/icons

Usage

The package ships raw SVG files. Each consumer imports them through its bundler's SVG loader.

Vite (dashboard)

// As a React component (with vite-plugin-svgr or similar):
import MergeQueueIcon from '@mergifyio/icons/merge-queue.svg?react';

<MergeQueueIcon width={40} height={40} />

// As a URL:
import url from '@mergifyio/icons/merge-queue.svg';

<img src={url} alt="Merge Queue" />

// As inline string (?raw):
import svg from '@mergifyio/icons/merge-queue.svg?raw';

Astro (docs / mergify.com)

---
import MergeQueue from '@mergifyio/icons/merge-queue.svg';
---
<MergeQueue width={40} height={40} />

(Astro 5+ has native SVG component support.)

Plain HTML / Markdown

<img src="/node_modules/@mergifyio/icons/merge-queue.svg" alt="Merge Queue" />

Adding new icons

1. Drop the new SVG under icons/ with a kebab-case filename (e.g. runner.svg).
2. Add an entry to the exports field in package.json.
3. Document the icon in this README's table.
4. Open a PR. After merge, a maintainer cuts a GitHub Release with the next semver tag — that publishes the new version to npm.

License

Apache-2.0