brandbooster-icons

Brandbooster Icons Package

SVG icons from the Brandbooster Icon Library

Installation (for standard modern project)

yarn add brandbooster-icons

or

npm install brandbooster-icons

Example usage

import { Home01 } from "brandbooster-icons";

function Example() {
  return (
    <div className="container">
      <Home01 /> Home
    </div>
  );
}

Configuration

You can cofigure the icons by passing props to the component.

import { Home01 } from "brandbooster-icons";

function Example() {
  return (
    <div className="container">
      <Home01
        type="solid"
        color="red"
        size="2rem"
        height="2rem"
        width="2.5rem"
        className="icon"
        style={{ margin: "1rem" }}
      />
      Home
    </div>
  );
}

Key	Default	Notes
type	outline	"outline" , "solid" , "bulk"
color	undefined (inherit)
size	24px	Accepts all types of values
height	24px	Accepts all types of values
width	24px	Accepts all types of values
className	undefined
style	undefined	Can overwrite CSS styles

List of available icons in this version

Group	Icon Name
Arrows	ArrowSort , DirectionDown , DirectionDown01 , DirectionLeft01 , DirectionRight01 , DownArrow01 , LeftArrow01 , RightArrow01 , UpArrow01
Business	ChartArrowUpRectangle
Communication	Mail
Device	Filter , Mail , Screenshot
Editor	AlignJustify, DocumentText
Education	Help , Idea
Finance	Profit
Grid	Landscape01 , Layout04 , PixelGridRectangle , Portrait01 , Grid02
Health	Eye02 , EyeDropper
Interface	AddCircle , Brightness , CheckCircle , Copy , EditRectangle , Eye , EyeDisable , Home01 , Home02 , Home03 , Home04 , ImageRectangle , Information , Logout01 , Minus01 , Notification02 , Plus01 , Remove , Search02 , SearchMinus , SearchPlus , Setting , Target , Tick , Trash , UserCircle , WarningError
Menu	MenuCircleVertical01
Multimedia & Audio	Headphones , ImageDownload , ImageEdit
Social	Google , Facebook , Instagram , Twtitter
User	User
Weather	Flash

Thank you!