ProIcons for React

Icon library with high-quality, customizable SVGs that can easily be used in React applications, with support for tree-shaking.

View on NPM | GitHub

Installation

Install via NPM:

NPM

npm install @proicons/react

Yarn

yarn add @proicons/react

PNPM

pnpm add @proicons/react

Bun

bun add @proicons/react

Important

This package is ESM only. To use in CommonJS contexts, use await import('@proicons/react') (asynchronous) or require('@proicons/react') in newer Node.js versions.

Usage

ProIcons can be imported by the icon name in PascalCase, and may end in Icon. The icon Add can be imported using either Add or AddIcon.

import { SearchIcon } from '@proicons/react'

function App() {
    return (
        <SearchIcon color="red" size={32} />
    )
}

Props from ProIconsOptions can be used to customize icons. These components get converted into <svg> elements with your configuration.

ProIcon Component

This package also includes a generic ProIcon component allowing you to import icons by their name. This is equivalent to the HTML API.

Danger

Using the <ProIcon> component imports all icons and breaks tree-shaking, which can increase bundle size when using module bundlers such as Webpack or Rollup.

<ProIcon icon="Add Square" size={32} />

// Other forms are allowed
<ProIcon icon="AddSquare" size={32} />
<ProIcon icon="AddSquareIcon" size={32} />
<ProIcon icon="addSquare" size={32} />
<ProIcon icon="add-square" size={32} />

All customization attributes on individual icons are also available on the ProIcon component.