@axieinfinity/dango-icons

SVG icon library for Axie Infinity products. 1300+ general icons and ~50 part icons, all as React components.

Install

From npmjs.org — no .npmrc required:

npm install @axieinfinity/dango-icons

Peer dependencies

Supports React 17, 18, or 19:

{
  "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
}

Usage

General icons

24×24 SVG icons that inherit currentColor from their parent. Named {Name}Icon:

import { TickIcon, Home08Icon, StarIcon } from '@axieinfinity/dango-icons';

<TickIcon size={16} />
<Home08Icon size={24} color="#FF9345" />

With Dango components

Many Dango components accept icon props:

import { Button, Intent } from '@axieinfinity/dango';
import { StarIcon } from '@axieinfinity/dango-icons';
import '@axieinfinity/dango/dist/bundle.css';

<Button text="Favorite" intent={Intent.Primary} icon={StarIcon} />

Part icons

48×48 Axie part icons with preserved original colors:

import { BackAquaticIcon } from '@axieinfinity/dango-icons';

<BackAquaticIcon size={48} />

PartIcon (CDN PNG)

For Axie part images served from CDN:

import { PartIcon, PartColor, PartType } from '@axieinfinity/dango-icons';

<PartIcon color={PartColor.Aquatic} type={PartType.Back} size={48} />

Icon props

All icons extend SvgIconProps:

interface SvgIconProps extends React.SVGProps<SVGSVGElement> {
  size?: number; // default: 16
}

Pass any standard SVG attribute (color, className, onClick, etc.).

Icon types

| Type | Count | ViewBox | Color behavior | |------|-------|---------|----------------| | General | 1300+ | 24×24 | currentColor — inherits from CSS | | Part | ~50 | 48×48 | Original hex colors preserved |

Discover icon names via IDE autocomplete after import { … } from '@axieinfinity/dango-icons', or browse src/generated/ in the monorepo during development.

License

MIT

Accessibility

Two rules, no exceptions.

An icon sitting next to text is decorative. The text already says it. Hide the icon so screen readers do not announce the same thing twice:

<Button text="Download" icon={DownloadIcon} />
// or, standalone:
<TaskDownloadIcon aria-hidden="true" />

An icon on its own needs the label on the control, not the icon. An icon-only button is still a button, and its name is what gets announced:

<IconButton icon={RefreshIcon} aria-label="Refresh results" />

Do not put aria-label on the icon and leave the button unnamed — the accessible name belongs to the thing being activated.

Part icons

PartIcon renders an <img>, so it needs real alt text. Write it the way a player would say it, not as a filename:

<PartIcon color={PartColor.Beast} type={PartType.Horn} alt="Beast horn" />

If a part icon is purely decorative and the part is already named nearby, pass alt="" — an empty alt is a deliberate signal to skip it, which is different from omitting it.

Known limitation: PartIconProps extends HTMLAttributes<HTMLImageElement>, which does not include alt. Passing it is a type error today. This needs fixing before the policy above can actually be followed.