Notoriously Punctual Manatee

    hand-drawn-icons

    1.1.3 • Public • Published

    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

    Buy Me A Coffee

    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 <Icon type="Attachment"/>
    Bar Graph enter image description here <Icon type="Bar Graph"/>
    Book enter image description here <Icon type="Book"/>
    Bookmark enter image description here <Icon type="Bookmark"/>
    Briefcase enter image description here <Icon type="Briefcase"/>
    Browser enter image description here <Icon type="Browser"/>
    Calendar enter image description here <Icon type="Calendar"/>
    Camera enter image description here <Icon type="Camera"/>
    Cancel enter image description here <Icon type="Cancel"/>
    Clock enter image description here <Icon type="Clock"/>
    Comment Lines enter image description here <Icon type="Comment Lines"/>
    Comment enter image description here <Icon type="Comment"/>
    Computer enter image description here <Icon type="Computer"/>
    Controls enter image description here <Icon type="Controls"/>
    Conversation enter image description here <Icon type="Conversation"/>
    Create New enter image description here <Icon type="Create New"/>
    Credit Card enter image description here <Icon type="Credit Card"/>
    Diary enter image description here <Icon type="Diary"/>
    Document enter image description here <Icon type="Document"/>
    Down Arrow enter image description here <Icon type="Down Arrow"/>
    Email enter image description here <Icon type="Email"/>
    Folder enter image description here <Icon type="Folder"/>
    Forward enter image description here <Icon type="Forward"/>
    Heart enter image description here <Icon type="Heart"/>
    Home enter image description here <Icon type="Home"/>
    Inbox enter image description here <Icon type="Inbox"/>
    Layers enter image description here <Icon type="Layers"/>
    Left Arrow enter image description here <Icon type="Left Arrow"/>
    Link enter image description here <Icon type="Link"/>
    List enter image description here <Icon type="List"/>
    Location Marker enter image description here <Icon type="Location Marker"/>
    Location enter image description here <Icon type="Location"/>
    Map enter image description here <Icon type="Map"/>
    Medal enter image description here <Icon type="Medal"/>
    Menu enter image description here <Icon type="Menu"/>
    Microphone enter image description here <Icon type="Microphone"/>
    Minus enter image description here <Icon type="Minus"/>
    More Details 3 enter image description here <Icon type="More Details 3"/>
    More Details 4 enter image description here <Icon type="More Details 4"/>
    Music enter image description here <Icon type="Music"/>
    No Volume enter image description here <Icon type="No Volume"/>
    Notification enter image description here <Icon type="Notification"/>
    Padlock enter image description here <Icon type="Padlock"/>
    Phone enter image description here <Icon type="Phone"/>
    Photo enter image description here <Icon type="Photo"/>
    Pie Chart enter image description here <Icon type="Pie Chart"/>
    Pin enter image description here <Icon type="Pin"/>
    Plus enter image description here <Icon type="Plus"/>
    Printer enter image description here <Icon type="Printer"/>
    Profile enter image description here <Icon type="Profile"/>
    Rearrange enter image description here <Icon type="Rearrange"/>
    Refresh enter image description here <Icon type="Refresh"/>
    Reply enter image description here <Icon type="Reply"/>
    Right Arrow enter image description here <Icon type="Right Arrow"/>
    Save enter image description here <Icon type="Save"/>
    Search enter image description here <Icon type="Search"/>
    Settings enter image description here <Icon type="Settings"/>
    Share enter image description here <Icon type="Share"/>
    Shopping enter image description here <Icon type="Shopping"/>
    Signal enter image description here <Icon type="Signal"/>
    Signals enter image description here <Icon type="Signals"/>
    Star enter image description here <Icon type="Star"/>
    Tablet enter image description here <Icon type="Tablet"/>
    Tag enter image description here <Icon type="Tag"/>
    Tick enter image description here <Icon type="Tick"/>
    Toggle enter image description here <Icon type="Toggle"/>
    Trash enter image description here <Icon type="Trash"/>
    Typing Comment enter image description here <Icon type="Typing Comment"/>
    Up Arrow enter image description here <Icon type="Up Arrow"/>
    User enter image description here <Icon type="User"/>
    Users enter image description here <Icon type="Users"/>
    Video Camera enter image description here <Icon type="Video Camera"/>
    Video enter image description here <Icon type="Video"/>
    View enter image description here <Icon type="View"/>
    Volume enter image description here <Icon type="Volume"/>
    Warning enter image description here <Icon type="Warning"/>

    Install

    npm i hand-drawn-icons

    DownloadsWeekly Downloads

    1

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    1.44 MB

    Total Files

    90

    Last publish

    Collaborators

    • nikhilol