Icons

MantleIcons is the default icon library of MantleUI.

Download#

MantleIcons is available at npm, run the following command to download it to your project.


npm install @mantle-ui/icons

Import#

CSS file of the icon library needs to be imported in your application.


import '@mantle-ui/icons/primeicons.css';

Figma#

MantleIcons library is now available on Figma Community. By adding them as a library, you can easily use these icons in your designs.

Basic#

MantleIcons use the pi pi-{icon} syntax such as pi pi-check. A standalone icon can be displayed using an element such as i or span


<i className="pi pi-check"></i>
<i className="pi pi-times"></i>
<span className="pi pi-search"></span>
<span className="pi pi-user"></span>

Size#

Size of an icon is controlled with the fontSize property of the element.


<i className="pi pi-check" style={{ fontSize: '1rem' }}></i>
<i className="pi pi-times" style={{ fontSize: '1.5rem' }}></i>
<i className="pi pi-search" style={{ fontSize: '2rem' }}></i>
<i className="pi pi-user" style={{ fontSize: '2.5rem' }}></i>

Color#

Icon color is defined with the color property which is inherited from parent by default.


<i className="pi pi-check" style={{ color: 'slateblue' }}></i>
<i className="pi pi-times" style={{ color: 'green' }}></i>
<i className="pi pi-search" style={{ color: 'var(--primary-color)' }}></i>
<i className="pi pi-user" style={{ color: '#708090' }}></i>

Spin#

Special pi-spin class applies infinite rotation to an icon.


<i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
<i className="pi pi-spin pi-cog" style={{ fontSize: '2rem' }}></i>

Constants#

Constants API is available to reference icons easily when used programmatically.


import React from 'react'; 
import { Menu } from '@mantle-ui/react/menu';
import { MantleIcons } from '@mantle-ui/react/api';

export default function ConstantsDemo() {
    const items = [
        {
            label: 'File',
            items: [
                { label: 'New', icon: MantleIcons.PLUS },
                { label: 'Open', icon: MantleIcons.DOWNLOAD }
            ]
        }
    ];

    return (
        <Menu model={items} />
    )
}

List#

Here is the full list of MantleIcons. More icons will be added periodically and you may also request new icons at the issue tracker.