Icons
Our icon library provides a consistent and scalable set of visual symbols for your application.
Icons from Untitled UI Design System
All icons displayed in this design system are sourced from Untitled UI, a premium icon library created by Jordan Hughes. Untitled UI provides over 100+ carefully crafted icons designed specifically for modern web and mobile applications, featuring consistent stroke weights, perfect pixel alignment, and comprehensive coverage of interface, navigation, file management, communication, and data visualization needs.
Icon Components
A comprehensive collection of 100+ carefully crafted icons with consistent styling and full dark mode support. All icons are sourced from Untitled UI for professional quality and design consistency.
Icons from Untitled UI - Premium icon library by Jordan Hughes
Interface
menu-04
Interface
search-lg
Interface
plus
Interface
x-close
Interface
settings-01
Interface
settings-04
Interface
info-circle
Interface
alert-triangle
Interface
check-circle
Interface
eye
Interface
eye-off
Interface
copy-06
Interface
edit-03
Interface
refresh-ccw-01
Interface
refresh-ccw-04
Interface
bell-01
Interface
calendar
Interface
calendar-check-01
Interface
camera-01
Interface
switch-vertical-01
Interface
Navigation
arrow-left
Navigation
arrow-narrow-left
Navigation
arrow-narrow-up
Navigation
arrow-narrow-down
Navigation
chevron-up
Navigation
chevron-down
Navigation
chevron-left
Navigation
chevron-right
Navigation
home-02
Navigation
log-in-01
Navigation
log-out-01
Navigation
pin-02
Navigation
Files
upload-01
Files
upload-cloud-01
Files
download-03
Files
file-03
Files
file-04
Files
file-05
Files
file-download-03
Files
folder
Files
folder-check
Files
link-02
Files
link-external-01
Files
share-07
Files
paperclip
Files
trash-03
Files
Communication
user-01
Communication
user-03
Communication
phone
Communication
phone-plus
Communication
message-chat-square
Communication
heart
Communication
heart-rounded
Communication
star-01
Communication
thumbs-up
Communication
thumbs-down
Communication
Charts
bar-chart-01
Charts
bar-chart-02
Charts
bar-chart-03
Charts
bar-chart-04
Charts
bar-chart-05
Charts
bar-chart-06
Charts
bar-chart-07
Charts
bar-chart-08
Charts
bar-chart-09
Charts
bar-chart-10
Charts
bar-chart-11
Charts
bar-chart-12
Charts
bar-chart-circle-01
Charts
bar-chart-circle-02
Charts
bar-chart-circle-03
Charts
bar-chart-square-01
Charts
bar-chart-square-02
Charts
bar-chart-square-03
Charts
bar-chart-square-down
Charts
bar-chart-square-minus
Charts
bar-chart-square-plus
Charts
bar-chart-square-up
Charts
bar-line-chart
Charts
horizontal-bar-chart-01
Charts
horizontal-bar-chart-02
Charts
horizontal-bar-chart-03
Charts
pie-chart-01
Charts
pie-chart-02
Charts
pie-chart-03
Charts
pie-chart-04
Charts
line-chart-down-01
Charts
line-chart-down-02
Charts
line-chart-down-03
Charts
line-chart-down-04
Charts
line-chart-down-05
Charts
line-chart-up-01
Charts
line-chart-up-02
Charts
line-chart-up-03
Charts
line-chart-up-04
Charts
line-chart-up-05
Charts
trend-down-01
Charts
trend-down-02
Charts
trend-up-01
Charts
trend-up-02
Charts
chart-breakout-circle
Charts
chart-breakout-square
Charts
Icon Specifications
Sizes
Colors
Categories
• Interface (21 icons)
• Navigation (12 icons)
• Files & Folders (14 icons)
• Communication (10 icons)
• Charts & Data (44 icons)
Formats
• SVG (Scalable)
• React Components
• PNG (Multiple sizes)
• Icon Fonts
• Figma Library
Usage Guidelines
Sizing
Use consistent icon sizes throughout your interface.
- • 16px: Inline text, small buttons
- • 20px: Standard UI elements
- • 24px: Prominent actions
- • 32px: Hero sections, large CTAs
Colors
Match icon colors to your design system.
- • Primary: Main actions, active states
- • Secondary: Supporting actions
- • Neutral: Default, inactive states
- • Destructive: Delete, error actions
Context
Choose icons that clearly represent their function.
- • Use familiar metaphors
- • Maintain consistency
- • Consider cultural differences
- • Test with users
Accessibility
Ensure icons are accessible to all users.
- • Provide alt text
- • Use ARIA labels
- • Maintain color contrast
- • Don't rely on color alone
Icon Library Attribution
All icons in this design system are sourced from Untitled UI - a premium icon library created by Jordan Hughes featuring over 100+ carefully crafted icons designed for modern web and mobile applications. The library includes extensive chart and data visualization options, interface elements, navigation icons, file management, and communication symbols.