Boxicons React

Boxicons React is a collection of React components designed to facilitate the integration of Boxicons icons.

Features

• Full TypeScript support
• Individual components for each icon
• Customization of size, color and style
• Support for solid and regular icons
• Icon rotation and flipping
• Vite integration

The icon list is the same as Boxicons, where you can get the required icon name

Installation

Install via npm

$ npm install boxicons-react

Import the required styles

App.tsx

import "boxicons-react/styles";

Use

Generic component BXIcon

import { BXIcon } from 'boxicons-react'

function App() {

  return (
    <div>
      <BXIcon
        name='sushi'
      />
    </div>
  )
}

This component requires the "name" prop to render the icon, which can be obtained from Boxicons

Individual icon component

import { GhostIcon } from 'boxicons-react'

function App() {

  return (
    <div>
      <GhostIcon />
    </div>
  )
}

To know how to import the components, change the icon name to PascalCase with the Icon suffix, for example: user-check => UserCheckIcon

Props

Prop	Description	Required	Type	Example
name	Icon name	Only for BXIcon component	string	name="user-check"
solid	Option to select a solid or regular icon, not available for all icons since not all have a solid version, logos don't have this version	No	boolean	solid=true
size	Icon size, you can use default boxicons sizes or customize it with a number	No	"xs","sm","md","lg", number	size="sm" or size={40}
rotate	Degrees the icon should rotate based on boxicons options	No	90, 180, 270	rotate={180}
flip	Mirror mode based on boxicons options	No	"horizontal", "vertical"	flip="vertical"
pull	Option to make the icon float	No	"left", "right"	pull="vertical"
color	Base color of the icon	No	string	color="#FFF000"
className	Class to customize the icon	No	string	className="anyClass"