React hand drawn icons
==
This package contains an `<Icon/>` component which can be provided with a `type` prop and a `color` prop.

![Demo hand-drawn-icons](https://github.com/nikhilol/hand-drawn-icons/blob/main/demo.gif?raw=true)

<a href="https://www.buymeacoffee.com/NikhilPatel" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-violet.png" alt="Buy Me A Coffee" style="max-height: 60px !important; max-width: 217px !important;" ></a>

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|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Attachment.svg)|`<Icon type="Attachment"/>`|
|Bar Graph|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Bar%20Graph.svg)|`<Icon type="Bar Graph"/>`|
|Book|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Book.svg)|`<Icon type="Book"/>`|
|Bookmark|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Bookmark.svg)|`<Icon type="Bookmark"/>`|
|Briefcase|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Briefcase.svg)|`<Icon type="Briefcase"/>`|
|Browser|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Browser.svg)|`<Icon type="Browser"/>`|
|Calendar|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Calendar.svg)|`<Icon type="Calendar"/>`|
|Camera|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Camera.svg)|`<Icon type="Camera"/>`|
|Cancel|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Cancel.svg)|`<Icon type="Cancel"/>`|
|Clock|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Clock.svg)|`<Icon type="Clock"/>`|
|Comment Lines|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Comment%20Lines.svg)|`<Icon type="Comment Lines"/>`|
|Comment|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Comment.svg)|`<Icon type="Comment"/>`|
|Computer|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Computer.svg)|`<Icon type="Computer"/>`|
|Controls|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Controls.svg)|`<Icon type="Controls"/>`|
|Conversation|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Conversation.svg)|`<Icon type="Conversation"/>`|
|Create New|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Create%20New.svg)|`<Icon type="Create New"/>`|
|Credit Card|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Credit%20Card.svg)|`<Icon type="Credit Card"/>`|
|Diary|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Diary.svg)|`<Icon type="Diary"/>`|
|Document|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Document.svg)|`<Icon type="Document"/>`|
|Down Arrow|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Down%20Arrow.svg)|`<Icon type="Down Arrow"/>`|
|Email|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Email.svg)|`<Icon type="Email"/>`|
|Folder|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Folder.svg)|`<Icon type="Folder"/>`|
|Forward|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Forward.svg)|`<Icon type="Forward"/>`|
|Heart|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Heart.svg)|`<Icon type="Heart"/>`|
|Home|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Home.svg)|`<Icon type="Home"/>`|
|Inbox|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Inbox.svg)|`<Icon type="Inbox"/>`|
|Layers|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Layers.svg)|`<Icon type="Layers"/>`|
|Left Arrow|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Left%20Arrow.svg)|`<Icon type="Left Arrow"/>`|
|Link|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Link.svg)|`<Icon type="Link"/>`|
|List|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/List.svg)|`<Icon type="List"/>`|
|Location Marker|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Location%20Marker.svg)|`<Icon type="Location Marker"/>`|
|Location|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Location.svg)|`<Icon type="Location"/>`|
|Map|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Map.svg)|`<Icon type="Map"/>`|
|Medal|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Medal.svg)|`<Icon type="Medal"/>`|
|Menu|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Menu.svg)|`<Icon type="Menu"/>`|
|Microphone|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Microphone.svg)|`<Icon type="Microphone"/>`|
|Minus|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Minus.svg)|`<Icon type="Minus"/>`|
|More Details 3|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/More%20Details%203.svg)|`<Icon type="More Details 3"/>`|
|More Details 4|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/More%20Details%204.svg)|`<Icon type="More Details 4"/>`|
|Music|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Music.svg)|`<Icon type="Music"/>`|
|No Volume|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/No%20Volume.svg)|`<Icon type="No Volume"/>`|
|Notification|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Notification.svg)|`<Icon type="Notification"/>`|
|Padlock|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Padlock.svg)|`<Icon type="Padlock"/>`|
|Phone|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Phone.svg)|`<Icon type="Phone"/>`|
|Photo|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Photo.svg)|`<Icon type="Photo"/>`|
|Pie Chart|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Pie%20Chart.svg)|`<Icon type="Pie Chart"/>`|
|Pin|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Pin.svg)|`<Icon type="Pin"/>`|
|Plus|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Plus.svg)|`<Icon type="Plus"/>`|
|Printer|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Printer.svg)|`<Icon type="Printer"/>`|
|Profile|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Profile.svg)|`<Icon type="Profile"/>`|
|Rearrange|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Rearrange.svg)|`<Icon type="Rearrange"/>`|
|Refresh|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Refresh.svg)|`<Icon type="Refresh"/>`|
|Reply|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Reply.svg)|`<Icon type="Reply"/>`|
|Right Arrow|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Attachment.svg)|`<Icon type="Right Arrow"/>`|
|Save|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Right%20Arrow.svg)|`<Icon type="Save"/>`|
|Search|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Search.svg)|`<Icon type="Search"/>`|
|Settings|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Settings.svg)|`<Icon type="Settings"/>`|
|Share|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Share.svg)|`<Icon type="Share"/>`|
|Shopping|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Shopping.svg)|`<Icon type="Shopping"/>`|
|Signal|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Signal.svg)|`<Icon type="Signal"/>`|
|Signals|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Signals.svg)|`<Icon type="Signals"/>`|
|Star|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Star.svg)|`<Icon type="Star"/>`|
|Tablet|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Tablet.svg)|`<Icon type="Tablet"/>`|
|Tag|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Tag.svg)|`<Icon type="Tag"/>`|
|Tick|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Tick.svg)|`<Icon type="Tick"/>`|
|Toggle|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Toggle.svg)|`<Icon type="Toggle"/>`|
|Trash|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Trash.svg)|`<Icon type="Trash"/>`|
|Typing Comment|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Typing%20Comment.svg)|`<Icon type="Typing Comment"/>`|
|Up Arrow|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Up%20Arrow.svg)|`<Icon type="Up Arrow"/>`|
|User|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/User.svg)|`<Icon type="User"/>`|
|Users|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Users.svg)|`<Icon type="Users"/>`|
|Video Camera|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Video%20Camera.svg)|`<Icon type="Video Camera"/>`|
|Video|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Video.svg)|`<Icon type="Video"/>`|
|View|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/View.svg)|`<Icon type="View"/>`|
|Volume|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Volume.svg)|`<Icon type="Volume"/>`|
|Warning|![enter image description here](https://raw.githubusercontent.com/nikhilol/hand-drawn-icons/fb8ef60a789e0193a21578b628011e58072e086a/src/Resources/regular/Warning.svg)|`<Icon type="Warning"/>`|