This package contains an <Icon/> component which can be provided with a type prop and a color prop.
In this package the type corresponds to what type of icon you need. For example <Icon type="Star"/> would produce a playful hand-drawn star as a react component.
The available types are shown at the bottom.
The color prop corresponds to the desired stroke colour of the icon. This prop take any type of color object.
For example, for a yellow star component, the react component could be;
-
<Icon type="Star" color="#FFFF00"/> -
<Icon type="Star" color="rgb(255, 255, 0)"/> -
<Icon type="Star" color="rgba(255, 255, 0, 1)"/>
These max size props do exactly the same as setting a max-width and max-height property in CSS.
| Icon Name | Preview | Usage |
|---|---|---|
| Attachment | <Icon type="Attachment"/> |
|
| Bar Graph | <Icon type="Bar"/> |
|
| Book | <Icon type="Book"/> |
|
| Bookmark | <Icon type="Bookmark"/> |
|
| Briefcase | <Icon type="Briefcase"/> |
|
| Browser | <Icon type="Browser"/> |
|
| Calendar | <Icon type="Calendar"/> |
|
| Camera | <Icon type="Camera"/> |
|
| Cancel | <Icon type="Cancel"/> |
|
| Clock | <Icon type="Clock"/> |
|
| Comment Lines | <Icon type="Comment"/> |
|
| Comment | <Icon type="Comment"/> |
|
| Computer | <Icon type="Computer"/> |
|
| Controls | <Icon type="Controls"/> |
|
| Conversation | <Icon type="Conversation"/> |
|
| Create New | <Icon type="Create"/> |
|
| Credit Card | <Icon type="Credit"/> |
|
| Diary | <Icon type="Diary"/> |
|
| Document | <Icon type="Document"/> |
|
| Down Arrow | <Icon type="Down"/> |
|
<Icon type="Email"/> |
||
| Folder | <Icon type="Folder"/> |
|
| Forward | <Icon type="Forward"/> |
|
| Heart | <Icon type="Heart"/> |
|
| Home | <Icon type="Home"/> |
|
| Inbox | <Icon type="Inbox"/> |
|
| Layers | <Icon type="Layers"/> |
|
| Left Arrow | <Icon type="Left"/> |
|
| Link | <Icon type="Link"/> |
|
| List | <Icon type="List"/> |
|
| Location Marker | <Icon type="Location"/> |
|
| Location | <Icon type="Location"/> |
|
| Map | <Icon type="Map"/> |
|
| Medal | <Icon type="Medal"/> |
|
| Menu | <Icon type="Menu"/> |
|
| Microphone | <Icon type="Microphone"/> |
|
| Minus | <Icon type="Minus"/> |
|
| More Details 3 | <Icon type="More"/> |
|
| More Details 4 | <Icon type="More"/> |
|
| Music | <Icon type="Music"/> |
|
| No Volume | <Icon type="No"/> |
|
| Notification | <Icon type="Notification"/> |
|
| Padlock | <Icon type="Padlock"/> |
|
| Phone | <Icon type="Phone"/> |
|
| Photo | <Icon type="Photo"/> |
|
| Pie Chart | <Icon type="Pie"/> |
|
| Pin | <Icon type="Pin"/> |
|
| Plus | <Icon type="Plus"/> |
|
| Printer | <Icon type="Printer"/> |
|
| Profile | <Icon type="Profile"/> |
|
| Rearrange | <Icon type="Rearrange"/> |
|
| Refresh | <Icon type="Refresh"/> |
|
| Reply | <Icon type="Reply"/> |
|
| Right Arrow | <Icon type="Right"/> |
|
| Save | <Icon type="Save"/> |
|
| Search | <Icon type="Search"/> |
|
| Settings | <Icon type="Settings"/> |
|
| Share | <Icon type="Share"/> |
|
| Shopping | <Icon type="Shopping"/> |
|
| Signal | <Icon type="Signal"/> |
|
| Signals | <Icon type="Signals"/> |
|
| Star | <Icon type="Star"/> |
|
| Tablet | <Icon type="Tablet"/> |
|
| Tag | <Icon type="Tag"/> |
|
| Tick | <Icon type="Tick"/> |
|
| Toggle | <Icon type="Toggle"/> |
|
| Trash | <Icon type="Trash"/> |
|
| Typing Comment | <Icon type="Typing"/> |
|
| Up Arrow | <Icon type="Up"/> |
|
| User | <Icon type="User"/> |
|
| Users | <Icon type="Users"/> |
|
| Video Camera | <Icon type="Video"/> |
|
| Video | <Icon type="Video"/> |
|
| View | <Icon type="View"/> |
|
| Volume | <Icon type="Volume"/> |
|
| Warning | <Icon type="Warning"/> |