@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