UI Library
Icons
Inline SVG icon set, sizes, colors, and usage samples.
Icon Set
Current Azora icons are inline SVG React components from the local icon system.
Current source
We use custom inline SVG components in components/icons.tsx, not an external icon package. Icons inherit text color through currentColor.
HomeIconHome
SearchIconSearch
BellIconBell
UserIconUser
UsersIconUsers
SettingsIconSettings
GridIconGrid
File TextIconFileText
FolderIconFolder
ImageIconImage
CloudIconCloud
MessageIconMessage
CalendarIconCalendar
ClockIconClock
Chart BarIconChartBar
StarIconStar
RocketIconRocket
CrownIconCrown
Check CircleIconCheckCircle
Info CircleIconInfoCircle
Alert TriangleIconAlertTriangle
Error CircleIconErrorCircle
PlusIconPlus
MinusIconMinus
XIconX
Chevron DownIconChevronDown
Chevron LeftIconChevronLeft
Chevron RightIconChevronRight
Dots VerticalIconDotsVertical
RefreshIconRefresh
PlayIconPlay
PauseIconPause
Sizes
SVG icons accept regular width and height props.
16px
20px
24px
32px
40px
48px
Colors
Icons use currentColor, so tone is controlled from the parent text color.
Primary.text-primary
Secondary.text-secondary
Success.text-success
Info.text-info
Warning.text-warning
Danger.text-danger
Stroke Width
The default stroke width is 1.8, but each SVG can receive a strokeWidth override.
1.2
1.8
2.4
3
Usage
Common examples for actions, buttons, chips, and navigation affordances.
Featured Active