React hand drawn icons
This package contains an <Icon/> component which can be provided with a type prop and a color prop.
Type
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.
Color
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)"/>
maxWidth and maxHeight
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 Graph"/> |
| 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 Lines"/> |
| Comment |  |
<Icon type="Comment"/> |
| Computer |  |
<Icon type="Computer"/> |
| Controls |  |
<Icon type="Controls"/> |
| Conversation |  |
<Icon type="Conversation"/> |
| Create New |  |
<Icon type="Create New"/> |
| Credit Card |  |
<Icon type="Credit Card"/> |
| Diary |  |
<Icon type="Diary"/> |
| Document |  |
<Icon type="Document"/> |
| Down Arrow |  |
<Icon type="Down Arrow"/> |
 |
<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 Arrow"/> |
| Link |  |
<Icon type="Link"/> |
| List |  |
<Icon type="List"/> |
| Location Marker |  |
<Icon type="Location Marker"/> |
| 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 Details 3"/> |
| More Details 4 |  |
<Icon type="More Details 4"/> |
| Music |  |
<Icon type="Music"/> |
| No Volume |  |
<Icon type="No Volume"/> |
| Notification |  |
<Icon type="Notification"/> |
| Padlock |  |
<Icon type="Padlock"/> |
| Phone |  |
<Icon type="Phone"/> |
| Photo |  |
<Icon type="Photo"/> |
| Pie Chart |  |
<Icon type="Pie Chart"/> |
| 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 Arrow"/> |
| 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 Comment"/> |
| Up Arrow |  |
<Icon type="Up Arrow"/> |
| User |  |
<Icon type="User"/> |
| Users |  |
<Icon type="Users"/> |
| Video Camera |  |
<Icon type="Video Camera"/> |
| Video |  |
<Icon type="Video"/> |
| View |  |
<Icon type="View"/> |
| Volume |  |
<Icon type="Volume"/> |
| Warning |  |
<Icon type="Warning"/> |