Galaxy Icons

Install

npm i @galaxy-ds/icons
# or
yarn add @galaxy-ds/icons

Usage

Import icons by name from the package and render them via the Icon component:

import { LeapWebBell16 } from '@galaxy-ds/icons';
import { Icon } from '@galaxy-ds/core';

<Icon name={LeapWebBell16} />

Icon colours — LEAP Web icons

LEAP Web icons are built to inherit their colour from the surrounding context via CSS currentColor. You do not need to set fill colours on the SVG paths directly.

Regular icons

Set the CSS color property on a parent element and the icon will inherit it:

// White icon inside a dark app header
<IconButton sx={{ color: '#ffffff' }}>
  <Icon name={LeapWebBell16} />
</IconButton>

// Primary-coloured icon in a menu
<MenuItem sx={{ color: 'primary.main' }}>
  <Icon name={LeapWebPrint20} />
</MenuItem>

Two-Tone icons

Two-Tone icons have two fill layers:

| Layer | CSS mechanism | Default | |---|---|---| | Primary (dark) | currentColor | Inherits color | | Accent (blue) | --icon-accent-color CSS variable | Falls back to currentColor |

Override the accent colour by setting --icon-accent-color on a parent:

// Custom accent colour
<Box sx={{ '--icon-accent-color': '#f69139' }}>
  <Icon name={GuiTwoToneSettings} />
</Box>

// Accent inherits the same colour as primary (monochrome)
// — no override needed, the variable falls back to currentColor automatically

Building icons

LEAP Web icons are generated from SVG source files in ./src/icons/leapWeb/. The build script uses SVGR to convert SVGs to React components and rewrites hardcoded fill values at build time:

| Original fill | Compiled value | |---|---| | #1E365E | currentColor | | #0060A9 | var(--icon-accent-color, currentColor) |

To rebuild after adding or modifying SVG source files:

cd packages/icons
node build-leapweb.js