Brandbooster-icons NPM

Brandbooster Icons Package

SVG icons from the Brandbooster Icon Library

Installation (for standard modern project)

yarn add brandbooster-icons

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`