Menu
  • Get Started
  • Product
  • Resources
  • Tools & SDKs
  • Framework
  • Reference

Icons

React components for Medusa UI icons.

Installation#

The icons are available as an npm package. To install the package run:

Usage#

Code
1import { Sun } from "@medusajs/icons"2
3export default function Component() {4  return (5    <Sun />6  )7}
Was this page helpful?

Overview#

Below is a list of all the icons available in the Medusa UI design system.

Icon named AcademicCap
Icon named AcademicCapSolid
Icon named Adjustments
Icon named AdjustmentsDone
Icon named AiAssistent
Icon named Apple
Icon named ArchiveBox
Icon named ArrowDown
Icon named ArrowDownCircle
Icon named ArrowDownLeft
Icon named ArrowDownLeftMini
Icon named ArrowDownMini
Icon named ArrowDownRightMini
Icon named ArrowDownTray
Icon named ArrowLeft
Icon named ArrowLeftMini
Icon named ArrowLongDown
Icon named ArrowLongLeft
Icon named ArrowLongRight
Icon named ArrowLongUp
Icon named ArrowPath
Icon named ArrowPathMini
Icon named ArrowRightMini
Icon named ArrowRightOnRectangle
Icon named ArrowUpCircleSolid
Icon named ArrowUpDown
Icon named ArrowUpMini
Icon named ArrowUpRightMicro
Icon named ArrowUpRightMini
Icon named ArrowUpRightOnBox
Icon named ArrowUpTray
Icon named ArrowUturnLeft
Icon named ArrowsPointingOut
Icon named ArrowsPointingOutMini
Icon named ArrrowRight
Icon named AtSymbol
Icon named BackwardSolid
Icon named BarsArrowDown
Icon named BarsThree
Icon named Beaker
Icon named BellAlert
Icon named BellAlertDone
Icon named BellAlertSolid
Icon named Bolt
Icon named BoltSolid
Icon named Book
Icon named BookOpen
Icon named Bookmarks
Icon named BottomToTop
Icon named Bug
Icon named BugAntSolid
Icon named BuildingStorefront
Icon named BuildingTax
Icon named Buildings
Icon named BuildingsMini
Icon named BuildingsSolid
Icon named Calendar
Icon named CalendarMini
Icon named CalendarSolid
Icon named Camera
Icon named Cash
Icon named CashSolid
Icon named Channels
Icon named ChannelsSolid
Icon named ChartBar
Icon named ChartPie
Icon named ChatBubble
Icon named ChatBubbleLeftRight
Icon named ChatBubbleLeftRightSolid
Icon named Check
Icon named CheckCircle
Icon named CheckCircleMiniSolid
Icon named CheckCircleSolid
Icon named CheckMini
Icon named ChevronDoubleLeft
Icon named ChevronDoubleLeftMiniSolid
Icon named ChevronDoubleRight
Icon named ChevronDoubleRightMiniSolid
Icon named ChevronDown
Icon named ChevronDownMini
Icon named ChevronLeft
Icon named ChevronLeftMini
Icon named ChevronRight
Icon named ChevronRightMini
Icon named ChevronUpDown
Icon named ChevronUpMini
Icon named CircleArrowUp
Icon named CircleDottedLine
Icon named CircleFilledSolid
Icon named CircleHalfSolid
Icon named CircleMiniFilledSolid
Icon named CircleMiniSolid
Icon named CircleQuarterSolid
Icon named CircleSolid
Icon named CircleStack
Icon named CircleStackSolid
Icon named CircleThreeQuartersSolid
Icon named Clock
Icon named ClockChangedSolidMini
Icon named ClockSolid
Icon named ClockSolidMini
Icon named CloudArrowDown
Icon named CloudArrowUp
Icon named CogSixTooth
Icon named CogSixToothSolid
Icon named CommandLine
Icon named CommandLineSolid
Icon named Component
Icon named ComponentSolid
Icon named ComputerDesktop
Icon named ComputerDesktopSolid
Icon named CreditCard
Icon named CreditCardSolid
Icon named CubeSolid
Icon named CurrencyDollar
Icon named CurrencyDollarSolid
Icon named CursorArrowRays
Icon named DescendingSorting
Icon named Discord
Icon named DocumentSeries
Icon named DocumentText
Icon named DocumentTextSolid
Icon named DotsSix
Icon named EllipseBlueSolid
Icon named EllipseGreenSolid
Icon named EllipseGreySolid
Icon named EllipseMiniSolid
Icon named EllipseOrangeSolid
Icon named EllipsePurpleSolid
Icon named EllipseRedSolid
Icon named EllipseSolid
Icon named EllipsisHorizontal
Icon named EllipsisVertical
Icon named Envelope
Icon named EnvelopeSolid
Icon named ExclamationCircle
Icon named ExclamationCircleSolid
Icon named Eye
Icon named EyeMini
Icon named EyeSlash
Icon named EyeSlashMini
Icon named FaceSmile
Icon named Facebook
Icon named Figma
Icon named FlagMini
Icon named FlyingBox
Icon named Folder
Icon named FolderIllustration
Icon named FolderOpen
Icon named FolderOpenIllustration
Icon named ForwardSolid
Icon named Funnel
Icon named Gatsby
Icon named GatsbyEx
Icon named Gift
Icon named GiftSolid
Icon named Github
Icon named Glasses
Icon named GlobeEurope
Icon named GlobeEuropeSolid
Icon named Google
Icon named GridList
Icon named HandTruck
Icon named Hashtag
Icon named Heart
Icon named HeartBroken
Icon named History
Icon named InboxSolid
Icon named InformationCircle
Icon named InformationCircleSolid
Icon named Javascript
Icon named JavascriptEx
Icon named Key
Icon named KeySolid
Icon named Keyboard
Icon named Klarna
Icon named KlarnaEx
Icon named Klaviyo
Icon named Lifebuoy
Icon named LightBulb
Icon named LightBulbSolid
Icon named Link
Icon named Linkedin
Icon named ListBullet
Icon named ListCheckbox
Icon named ListTree
Icon named Loader
Icon named LockClosedSolid
Icon named LockClosedSolidMini
Icon named LockOpenSolid
Icon named MagnifierAlert
Icon named MagnifyingGlass
Icon named MagnifyingGlassMini
Icon named Map
Icon named MapPin
Icon named Mastercard
Icon named Medusa
Icon named Meta
Icon named Minus
Icon named MinusMini
Icon named Moon
Icon named MoonSolid
Icon named Newspaper
Icon named NextJs
Icon named OpenRectArrowOut
Icon named PaperClip
Icon named PauseSolid
Icon named PenPlus
Icon named Pencil
Icon named PencilSquare
Icon named PencilSquareSolid
Icon named Phone
Icon named Photo
Icon named PhotoSolid
Icon named PlayMiniSolid
Icon named PlaySolid
Icon named Plus
Icon named PlusMini
Icon named Puzzle
Icon named PuzzleSolid
Icon named QuestionMark
Icon named QuestionMarkCircle
Icon named QueueList
Icon named ReactJs
Icon named ReactJsEx
Icon named Receipt
Icon named ReceiptPercent
Icon named ReplaySolid
Icon named Resize
Icon named RocketLaunch
Icon named RocketLaunchSolid
Icon named Rss
Icon named Sanity
Icon named Server
Icon named ServerSolid
Icon named ServerStack
Icon named ServerStackSolid
Icon named Share
Icon named Shopping
Icon named ShoppingBag
Icon named ShoppingCart
Icon named ShoppingCartSolid
Icon named SidebarLeft
Icon named SidebarRight
Icon named Slack
Icon named Snooze
Icon named Sparkles
Icon named SparklesMini
Icon named SparklesMiniSolid
Icon named SparklesSolid
Icon named Spinner
Icon named SquareBlueSolid
Icon named SquareGreenSolid
Icon named SquareGreySolid
Icon named SquareOrangeSolid
Icon named SquarePurpleSolid
Icon named SquareRedSolid
Icon named SquareTwoStack
Icon named SquareTwoStackMini
Icon named SquareTwoStackSolid
Icon named SquaresPlus
Icon named SquaresPlusSolid
Icon named StackPerspective
Icon named Star
Icon named StarSolid
Icon named Stopwatch
Icon named Stripe
Icon named Sun
Icon named SunSolid
Icon named Swatch
Icon named SwatchSolid
Icon named Tag
Icon named TagSolid
Icon named Tailwind
Icon named Text
Icon named ThumbDown
Icon named ThumbUp
Icon named ThumbnailBadge
Icon named TimelineVertical
Icon named Tools
Icon named ToolsSolid
Icon named TopToBottom
Icon named Trash
Icon named TriangleDownMini
Icon named TriangleLeftMini
Icon named TriangleRightMini
Icon named TriangleRightMiniHover
Icon named TriangleUpMini
Icon named TrianglesMini
Icon named Trophy
Icon named TruckFast
Icon named Typescript
Icon named TypescriptEx
Icon named User
Icon named UserGroup
Icon named UserMini
Icon named Users
Icon named UsersSolid
Icon named Vercel
Icon named VerifiedBadge
Icon named Visa
Icon named WandSparkle
Icon named Window
Icon named X
Icon named XCircle
Icon named XCircleSolid
Icon named XMark
Icon named XMarkMini

Icon Props#

Icons accept all props that an svg element accepts.

Icon Color#

By default, outline icons' stroke color and solid icon's fill color are set to currentColor.

You can set a different color by passing the color prop.

Was this example helpful?

You can also use a CSS class by passing the className prop.

Was this example helpful?

Icon Size#

All icon's width and height are 20px and it's not possible to change them.