Getting Started

Kyber exposes a set of SVG icons that are usable as React components.

pnpm i @emoney/kyber-icons

import { IconFileGif } from '@emoney/kyber-icons';

Icons are sized relative to the text around them. To make them larger or smaller, set the font size of the icon or the parent element accordingly.

Result

Live Editor

<KyberIcons.IconFileGif style={{ fontSize: '3rem' }} />

<KyberIcons.IconFileGif style={{ fontSize: '3rem' }} />

Props are spread onto the <svg> element, so any props supported by SVGs are supported on these Icons.

All Icons

Result

Live Editor

<div
    style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, 100px)',
        gridGap: '2rem',
        fontSize: '3rem',
    }}
>
    {Object.keys(KyberIcons).map((icon) => {
        const Component = KyberIcons[icon];
        return (
            <div className="text-center">
                <Component />
                <br />
                <div className="fs-xxs">{icon}</div>
            </div>
        );
    })}
</div>

<div
    style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, 100px)',
        gridGap: '2rem',
        fontSize: '3rem',
    }}
>
    {Object.keys(KyberIcons).map((icon) => {
        const Component = KyberIcons[icon];
        return (
            <div className="text-center">
                <Component />
                <br />
                <div className="fs-xxs">{icon}</div>
            </div>
        );
    })}
</div>