Foundation
Main View
Components
Charts
Dialogs
Framer Animations
Forms
Grids
Typography
Tools
UiIcon
Package: @uireact/icons
Component used to render icons in a web application
1. Make sure you install peer dependencies first:
2. Install package:
npm i -S @uireact/icons
<UiIcon icon="Search" size="xlarge" category="positive" />
This prop will animate the icon container it won't animate the actual SVG paths, for that we are working on a new package of animated icons as that requires some rework on the icons itself.
<UiIcon icon="BellRing" size="xlarge" category="positive" motion={UiReactViewShaking} />
You can see the docs for @uireact/framer-animations package to see the full list of available animations.
Default is weight 100
<> <UiIcon icon="Search" size="xlarge" category="tertiary" weight="10" /> <UiIcon icon="Search" size="xlarge" category="tertiary" weight="50" /> <UiIcon icon="Search" size="xlarge" category="tertiary" /> <UiIcon icon="Search" size="xlarge" category="tertiary" weight="150" /> <UiIcon icon="Search" size="xlarge" category="tertiary" weight="200" /> </>
<UiIcon icon="Search" size="xlarge" category="tertiary" inverseColoration />
<> <UiIcon icon="Search" size="xlarge" category="tertiary" coloration="dark" /> Always render DARK coloration <br /> <UiIcon icon="Search" size="xlarge" category="tertiary" coloration="light" /> Always render LIGHT coloration </>
Ad
Add
AirplaneJourney
Airplay
Alien
AlignCenter
AlignJustify
AlignLeft
AngleCircleDown
AngleCircleLeft
AngleCircleRight
AngleCircleUp
AngleClearDown
AngleClearLeft
AngleClearRight
AngleClearUp
AngleDoubleDown
AngleDoubleLeft
AngleDoubleRight
AngleDoubleUp
AngleSmallDown
AngleSmallLeft
AngleSmallRight
AngleSmallUp
AngleSquareDown
AngleSquareLeft
AngleSquareRight
AngleSquareUp
ArrowClearDown
ArrowClearLeft
ArrowClearRight
ArrowClearUp
ArrowSquareDown
ArrowSquareLeft
ArrowSquareRight
ArrowSquareUp
ArrowTransferDownload
ArrowTransferUpload
ArrowTrendDown
ArrowTrendUp
ArrowsExpand
ArrowsMinimize
ArrowsRetweet
BadgeCheck
BadgeDollar
Ban
Bank
Barcode
BarsProgress
BarsSort
BatteryEmpty
BatteryExclamation
BatteryFull
BatteryHalf
BatteryQuarter
BatterySlash
BatteryThreeQuarters
Bed
Beer
Bell
BellRing
BellSlash
Book
Bookmark
Bottle
BracketCurly
BracketCurlyRight
BracketsCurly
BrandsAirbnb
BrandsAmericanExpress
BrandsAndroid
BrandsAppStoreIos
BrandsApple
BrandsApplePay
BrandsBitcoin
BrandsBluetooth
BrandsCcAmazonPay
BrandsCcApplePay
BrandsCcVisa
BrandsChromecast
BrandsCss3
BrandsCss3Alt
BrandsDev
BrandsDiscord
BrandsDocker
BrandsDropbox
BrandsEbay
BrandsEthereum
BrandsEvernote
BrandsFacebook
BrandsFacebookMessenger
BrandsFigma
BrandsFirefoxBrowser
BrandsFlickr
BrandsFlipboard
BrandsGithub
BrandsGitlab
BrandsGoogle
BrandsHbo
BrandsHtml5
BrandsImdb
BrandsInstagram
BrandsJava
BrandsKickstarter
BrandsLinkedin
BrandsMcdonalds
BrandsMedium
BrandsMeta
BrandsMicrosoft
BrandsMicrosoftEdge
BrandsMicrosoftExplorer
BrandsNetflix
BrandsPatreon
BrandsPaypal
BrandsPhotoshop
BrandsPhp
BrandsPinterest
BrandsPostgre
BrandsPython
BrandsReddit
BrandsSamsung
BrandsShopify
BrandsSkype
BrandsSlack
BrandsSnapchat
BrandsSoundcloud
BrandsSpotify
BrandsStarbucks
BrandsStripe
BrandsSwift
BrandsTelegram
BrandsTikTok
BrandsTrello
BrandsTripadvisor
BrandsTumblr
BrandsTwitch
BrandsTypescript
BrandsUber
BrandsUbuntu
BrandsVimeo
BrandsVisualBasic
BrandsWhatsapp
BrandsWikipedia
BrandsYelp
BrandsYoutube
BrandsZoom
Briefcase
Brightness
Browser
Building
BurgerFries
Burrito
BusAlt
Calculator
CalendarClock
CalendarDays
CalendarLines
Campfire
Camping
CarAlt
CarCrash
CarJourney
CarMechanic
CaretDown
CaretLeft
CaretRight
CaretUp
Carrot
Cat
Cello
ChartArea
ChartBullet
ChartCandlestick
ChartHistogram
ChartPie
ChartSimple
ChartTreeMap
Check
CheckCircle
CheckCircleEmpty
CheckComment
CheckDouble
CheckSquare
CheckSquareEmpty
CheckUnregularCircle
Checklist1
Checklist2
ChildHead
CircleHalfStroke
CirclePhone
City
Clock
ClockTwo
CloudRain
CloudShowersHeavy
CloudSun
CloudSunRain
CloudsMoon
CocktailAlt
CodeSimple
Coffee
CoffeePot
Coins
CommentUnregularCircle
Computer
Corn
Couch
Credential
CreditCard
Crow
CupStraw
Cupcake
CurrencyDollarUnregularCircle
CurrencyEuro
CursorFinger
Database
Devices
DollarBag
DollarCircle
DollarSquare
Donate
DownloadCloud
DroneFront
EarthAfrica
EarthAmericas
EarthAsia
EarthEuropa
Edit
EditCircle
EditComment
EditDocument
EditSquare
EditUnregularCircle
Expand
Eye
EyeCrossed
FileChartLine
FileDownload
FileExclamation
FileInvoice
FilePdf
FireFlameCurved
Fish
Flame
FlowerDaffodil
FlowerTulip
Football
Guitar
Hamburger
HamburgerSoda
HandHoldingSeeding
Headphones
Heart
HelicopterSide
Home
Hospitals
Hotdog
Hotel
HouseBlank
IceCream
Info
IslandTropical
Layers
LayoutFluid
LayoutGrid
Like
Link
List
ListCheck
ListCheckClear
ListClear
ListRectangle
LoadingBall
LoadingBars
LoadingSpinner
LocationHome
Mail
Map
MapMarker
Marker
MenuBurger
MenuCircle
MenuCircleVertical
MenuDots
MenuDotsVertical
MenuSquare
MenuSquareVertical
Meteor
MoneyBill
Moon
Mountain
Mouse
MusicAlt
NoImage
Opacity
Party
PartyBell
Password
Paste
PauseCircle
Pdf
PhotoCamera
Picture
Pie
PiggyBank
PizzaSlice
Plane
PlaneAlt
PlayCircle
Plus
PlusSmall
Poo
Poop
Question
QuestionUnregularCircle
Refresh
RotateLeft
Route
Rv
Salad
SandwichAlt
SatelliteDish
Screen
Search
Send
Settings
SettingsBig
SettingsSliders
Share
ShareSquare
Ship
ShipSide
ShippingFast
ShoppingBasket
ShoppingCart
ShoppingCart2
ShoppingCartAdd
ShuttleVan
Sidebar
SignIn
SignOut
SignalAlt
SignalAlt1
SignalAlt2
SignalAltSlash
SkiJump
Smartphone
Sort
SortAlphaDown
SortAlphaUp
SortAmountDown
SortAmountUp
SortArrows
Strawberry
Sun
TableList
Taxi
TaxiBus
Tea
Terminal
ToggleOff
ToggleOn
Trash
TrashCircle
Trees
TruckMoving
TruckPickup
TypingComment
TypingUnregularCircle
Umbrella
UmbrellaBeach
Upload
UploadCloud
User
UserAdd
UserBox
UserCircle
UserCrown
UserDelete
UserLine
UserRobot
UserSettings
UserSimple
Users
UsersSettings
VideoCamera
VideoCameraVintage
Volume
VolumeMute
Wallet
WarningCircle
WarningDiamond
WarningTriangle
Wheat
X
XCircle
XDocument
XLeft
XRight
XSmall
XSmallCircle
XSquare
XUnregularCircle
XUser
Yen
ZoomIn
ZoomOut