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!