brandbooster-icons
v2.2.5
Published
SVG icons from the Brandbooster Icon Library
Downloads
19
Readme
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!