Hudoro Icon

Hudoro Icon is a strict and customizable Icon component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/icon

Instal package using yarn

  yarn add @hudoro/icon

Instal package using npm

  npm i @hudoro/icon

Usage/Examples (you can combine using icon package hudoro)

import React from "react";
import {Icon} from "@hudoro/icon";
import ReactDOM from "react-dom/client";

const App = () => (
  <div>
    <h1>Component test</h1>
    <Icon name="Alarm" size="lg" />
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/icon

Props that you can pass to <Icon {...props} />

| Prop Name | Value | required | | :-------- | :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----- | | size | "xs" / "sm" / "md" / "lg" | false | | name | "ArrowUp", | "ArrowDown","ArrowLeft","ArrowRight","ChevronUp","ChevronDown","ChevronLeft","ChevronRight","Vertical","Horizontal","RotateLeft","RotateRight","Refresh","Undo","Redo","ArrowSmallUp","ArrowSmallDown","ArrowSmallLeft","ArrowSmallRight","ChevronSmallUp","ChevronSmallDown","ChevronSmallLeft","ChevronSmallRight","VerticalSmall","HorizontalSmall","RotateSmallLeft","RotateSmallRight","RefreshSmall","UndoSmall","RedoSmall","ArrowCircleUp","ArrowCircleDown","ArrowCircleLeft","ArrowCircleRight","ChevronCircleUp","ChevronCircleDown","ChevronCircleLeft","ChevronCircleRight","VerticalCircle","HorizontalCircle","RotateCircleLeft","RotateCircleRight","RefreshCircle","UndoCircle","RedoCircle","Cam","CamDisabled","Camera","CameraDisabled","Cast","Forward","Fullscreen","HeadPhones","Laptop","MicroPhone","MicroDisabled","Newscreen","Next","Phone","PhoneCall","PhoneCross","PhoneDown","Play","Previous","Rewind","Screen","ScreenDisabled","ScreenShare","SmartPhone","Sound1","Sound2","Sound3","Speaker1","Speaker2","Speaker3","SpeakerCross","SpeakerDisabled","Stop","Windows","Plus","PlusSmall","PlusCircle","Minus","MinusSmall","MinusCircle","Check","CheckSmall","CheckCircle","Warning","WarningSmall","WarningCircle","Info","InfoSmall","InfoCircle","Question","QuestionSmall","QuestionCircle","Cross","CrossSmall","CrossCircle","Dot","Apple","Dribbble","Instagram","GoogleDrive","YouTube","Skype","Pinterest","Chrome","Facebook","Tumblr","Snapchat","Linkedin","Figma","Sketch","Twitter","Vk","GooglePlaystore","AppStore","Twitch","Google","Telegram","Whatsapp","Viber","FacebookMessager","Line","Reddit","QQ","Android","Dropbox","Gmail","GoogleAlt","Slack","AdobePhotoshop","AdobeIlustration","AdobeXD","AdobeAfterEffect","AdobeIhDesign","AdobeLightroom","AdobePremier","Be","Windows10","Asana","Trello","Medium","Notion","Home1","Home2","Search","Heart","Bell","BellDisabled","Explore","Location1","Location2","Cart1","Cart2","Cart3","Cart4","Basket","User1","User2","UserCheck","UserMinus","UserWarning","UserInfo","UserQuestion","UserMore","Users","Calendar","CalendarUser","CalendarCheck","CalendarPlus","CalendarMinus","CalendarCross","CalendarWarning","CalendarClock","CalendarEdit","CalendarLink","CalendarLock","Filter","FilterVertical","FilterHorizontal","Settings","EyeOpen","EyeClosed","MenuBurger","MenuVertical","MenuHorizontal","Officer","Alarm","BasketBall","Block1","Block2","Chart","ChartVertical","Circle","Clock","Coin","Command","CreditCard","Crown1","Crown2","Cut","DocumentClean","DocumentCheck","DocumentCross","DocumentFilled","DocumentPlus","DocumentMinus","EmoteSmile","EmoteSad","EmoteNormal","FaceId","Flag1","Flag2","Flag3","Gift","Globe1","Grid","GridVertical","GridHorizontal","HourGlass","Image","Key","ListRight","ListLeft","ListCenter","ListPointers","LockOff","LockOn","Map","Navigation","Offer","Package","Pin1","Pin2","Power","Print","Quote","Send1","Send2","ShieldEmpty","ShieldCheck","ShieldCross","Shirt","StopWatch","Suitcase","Tag","TrendingUp","TrendingDown","Trophy","Wallet","Wand","Rupiah","Loading","Fee","Ticket","DocumentDetail","Vehicle","Warehouse","Duplicate","Ingredients","Trash1","Trash2","Delete","Download","Login","Logout","Edit1","Edit2","Edit3","Edit4","Link","Bookmark","ZoomIn","ZoomOut","Share1","Share2","Upload","Copy","Like","Dislike","Save","ScanQR","Bone","BoneBroken","Capsule","Cardiology","DNA","Female","Male","HomeHospital","LocationMed1","LocationMed2","Medkit","Meds","PinpaperFilled","PinpaperPlus","PinpaperMinus","PinpaperCross","PinpaperCheck","Syringe","TestTube","Tooth","Virus","MessageCircle","MessageCircleDots","MessageCircleLine","MessageSquare","MessageSquareDots","MessageSquareLine","Attach","AtEmail","Mail","Inbox","Money","Air","Bolt","Cloud","Ice","Moon","Sun","Star1","Star2","Umbrella1","Umbrella2","Waterdrop", | false |