@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