Ui.Icon

Displays an SVG icon, which can be interactive.

Interactive Demo

You can play around with a Ui.Icon below using the controls.

Icon
Beaker
Href
Opacity (1)
Size
Interactive
Disabled
<Ui.Icon
size={Ui.Size.Px(30)}
icon={Ui.Icons:BEAKER}
interactive={false}
disabled={false}
opacity={1}/>
Icon

The icon can be specified using the icon property.

<>
<Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD} size={Ui.Size.Px(30)}/>
<Ui.Icon icon={Ui.Icons.ALERT} size={Ui.Size.Px(30)}/>
<Ui.Icon icon={Ui.Icons.CODE} size={Ui.Size.Px(30)}/>
<Ui.Icon icon={Ui.Icons.EYE} size={Ui.Size.Px(30)}/>
</>
Included Icons

You can find below the icons which are currently included.

Alert
ALERT
Archive
ARCHIVE
Arrow Both
ARROW_BOTH
Arrow Down
ARROW_DOWN
Arrow Left
ARROW_LEFT
Arrow Right
ARROW_RIGHT
Arrow Small Down
ARROW_SMALL_DOWN
Arrow Small Left
ARROW_SMALL_LEFT
Arrow Small Right
ARROW_SMALL_RIGHT
Arrow Small Up
ARROW_SMALL_UP
Arrow Up
ARROW_UP
Beaker
BEAKER
Bell
BELL
Bold
BOLD
Book
BOOK
Bookmark
BOOKMARK
Briefcase
BRIEFCASE
Broadcast
BROADCAST
Browser
BROWSER
Bug
BUG
Calendar
CALENDAR
Cart
CART
Check
CHECK
Checklist
CHECKLIST
Chevron Down
CHEVRON_DOWN
Chevron Left
CHEVRON_LEFT
Chevron Right
CHEVRON_RIGHT
Chevron Up
CHEVRON_UP
Circle Slash
CIRCLE_SLASH
Circuit Board
CIRCUIT_BOARD
Clippy
CLIPPY
Clock
CLOCK
Cloud Download
CLOUD_DOWNLOAD
Cloud Upload
CLOUD_UPLOAD
Code
CODE
Comment
COMMENT
Comment Discussion
COMMENT_DISCUSSION
Credit Card
CREDIT_CARD
Dash
DASH
Dashboard
DASHBOARD
Database
DATABASE
Dependent
DEPENDENT
Desktop Download
DESKTOP_DOWNLOAD
Device Camera
DEVICE_CAMERA
Device Camera Video
DEVICE_CAMERA_VIDEO
Device Desktop
DEVICE_DESKTOP
Device Mobile
DEVICE_MOBILE
Diff
DIFF
Diff Added
DIFF_ADDED
Diff Ignored
DIFF_IGNORED
Diff Modified
DIFF_MODIFIED
Diff Removed
DIFF_REMOVED
Diff Renamed
DIFF_RENAMED
Double Chevron Left
DOUBLE_CHEVRON_LEFT
Double Chevron Right
DOUBLE_CHEVRON_RIGHT
Ellipsis
ELLIPSIS
Eye
EYE
Eye Closed
EYE_CLOSED
File
FILE
File Binary
FILE_BINARY
File Code
FILE_CODE
File Directory
FILE_DIRECTORY
File Media
FILE_MEDIA
File Pdf
FILE_PDF
File Submodule
FILE_SUBMODULE
File Symlink Directory
FILE_SYMLINK_DIRECTORY
File Symlink File
FILE_SYMLINK_FILE
File Zip
FILE_ZIP
Flame
FLAME
Fold
FOLD
Fold Down
FOLD_DOWN
Fold Up
FOLD_UP
Gear
GEAR
Gift
GIFT
Gist
GIST
Gist Secret
GIST_SECRET
Git Branch
GIT_BRANCH
Git Commit
GIT_COMMIT
Git Compare
GIT_COMPARE
Git Merge
GIT_MERGE
Git Pull Request
GIT_PULL_REQUEST
Github Action
GITHUB_ACTION
Globe
GLOBE
Grabber
GRABBER
Graph
GRAPH
Heart
HEART
Heart Outline
HEART_OUTLINE
History
HISTORY
Home
HOME
Horizontal Rule
HORIZONTAL_RULE
Hubot
HUBOT
Inbox
INBOX
Infinity
INFINITY
Info
INFO
Internal Repo
INTERNAL_REPO
Issue Closed
ISSUE_CLOSED
Issue Opened
ISSUE_OPENED
Issue Reopened
ISSUE_REOPENED
Italic
ITALIC
Jersey
JERSEY
Kebab Horizontal
KEBAB_HORIZONTAL
Kebab Vertical
KEBAB_VERTICAL
Key
KEY
Keyboard
KEYBOARD
Law
LAW
Light Bulb
LIGHT_BULB
Line Arrow Down
LINE_ARROW_DOWN
Line Arrow Left
LINE_ARROW_LEFT
Line Arrow Right
LINE_ARROW_RIGHT
Line Arrow Up
LINE_ARROW_UP
Link
LINK
Link External
LINK_EXTERNAL
List Ordered
LIST_ORDERED
List Unordered
LIST_UNORDERED
Location
LOCATION
Lock
LOCK
Logo Gist
LOGO_GIST
Logo Github
LOGO_GITHUB
Mail
MAIL
Mail Read
MAIL_READ
Mark Github
MARK_GITHUB
Markdown
MARKDOWN
Megaphone
MEGAPHONE
Mention
MENTION
Milestone
MILESTONE
Mint Logo
MINT
Mirror
MIRROR
Moon
MOON
Mortar Board
MORTAR_BOARD
Mute
MUTE
No Newline
NO_NEWLINE
Note
NOTE
Octoface
OCTOFACE
Organization
ORGANIZATION
Package
PACKAGE
Paintcan
PAINTCAN
Pencil
PENCIL
Person
PERSON
Pin
PIN
Play
PLAY
Plug
PLUG
Plus
PLUS
Plus Small
PLUS_SMALL
Primitive Dot
PRIMITIVE_DOT
Primitive Dot Stroke
PRIMITIVE_DOT_STROKE
Primitive Square
PRIMITIVE_SQUARE
Project
PROJECT
Pulse
PULSE
Puzzle
PUZZLE
Question
QUESTION
Quote
QUOTE
Radio Tower
RADIO_TOWER
Reply
REPLY
Repo
REPO
Repo Clone
REPO_CLONE
Repo Force Push
REPO_FORCE_PUSH
Repo Forked
REPO_FORKED
Repo Pull
REPO_PULL
Repo Push
REPO_PUSH
Repo Template
REPO_TEMPLATE
Repo Template Private
REPO_TEMPLATE_PRIVATE
Report
REPORT
Request Changes
REQUEST_CHANGES
Rocket
ROCKET
Rss
RSS
Ruby
RUBY
Saved
SAVED
Screen Full
SCREEN_FULL
Screen Normal
SCREEN_NORMAL
Search
SEARCH
Server
SERVER
Settings
SETTINGS
Shield
SHIELD
Shield Check
SHIELD_CHECK
Shield Lock
SHIELD_LOCK
Shield X
SHIELD_X
Sign In
SIGN_IN
Sign Out
SIGN_OUT
Skip
SKIP
Smiley
SMILEY
Squirrel
SQUIRREL
Star
STAR
Stop
STOP
Sun
SUN
Sync
SYNC
Tag
TAG
Tasklist
TASKLIST
Telescope
TELESCOPE
Terminal
TERMINAL
Text Size
TEXT_SIZE
Three Bars
THREE_BARS
Thumbsdown
THUMBSDOWN
Thumbsup
THUMBSUP
Tools
TOOLS
Trashcan
TRASHCAN
Triangle Down
TRIANGLE_DOWN
Triangle Left
TRIANGLE_LEFT
Triangle Right
TRIANGLE_RIGHT
Triangle Up
TRIANGLE_UP
Triangle Up Down
TRIANGLE_UP_DOWN
Unfold
UNFOLD
Unmute
UNMUTE
Unsaved
UNSAVED
Unverified
UNVERIFIED
Verified
VERIFIED
Versions
VERSIONS
Watch
WATCH
Workflow
WORKFLOW
Workflow All
WORKFLOW_ALL
X
X
Zap
ZAP
Opacity

The components opacity can be controlled with the opacity property.

<>
<Ui.Icon size={Ui.Size.Px(30)} icon={Ui.Icons.ALERT} opacity={1}/>
<Ui.Icon size={Ui.Size.Px(30)} icon={Ui.Icons.ALERT} opacity={0.75}/>
<Ui.Icon size={Ui.Size.Px(30)} icon={Ui.Icons.ALERT} opacity={0.5}/>
<Ui.Icon size={Ui.Size.Px(30)} icon={Ui.Icons.ALERT} opacity={0.25}/>
</>
Size

The size of the component can be set with the size property.

<>
<Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD} size={Ui.Size.Px(12)}/>
<Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD} size={Ui.Size.Px(16)}/>
<Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD} size={Ui.Size.Px(20)}/>
</>
Auto Size

The size of the component by default inherits the parent elements font size.

<>
<div style="font-size: 14px"><Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD}/></div>
<div style="font-size: 18px"><Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD}/></div>
<div style="font-size: 26px"><Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD}/></div>
<div style="font-size: 32px"><Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD}/></div>
</>
Color

The color of the icon is determined by the parent elements color.

<>
<div style="color: red;">
<Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD} size={Ui.Size.Px(30)}/>
</div>
<div style="color: orangered">
<Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD} size={Ui.Size.Px(30)}/>
</div>
<div style="color: rebeccapurple">
<Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD} size={Ui.Size.Px(30)}/>
</div>
<div style="color: magenta">
<Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD} size={Ui.Size.Px(30)}/>
</div>
</>
As a Link

The icon will turn into a link if the href property is not empty.

<Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD} size={Ui.Size.Px(30)} href="/"/>
Interactive

The icon can be interactive if the interactive property is set.

<>
<Ui.Icon
icon={Ui.Icons.DESKTOP_DOWNLOAD}
size={Ui.Size.Px(30)}
interactive={true}
/>
<Ui.Icon
icon={Ui.Icons.DESKTOP_DOWNLOAD}
size={Ui.Size.Px(30)}
interactive={false}
/>
</>
Disabled

The icon can be disabled using the disabled property.

<>
<Ui.Icon
icon={Ui.Icons.DESKTOP_DOWNLOAD}
size={Ui.Size.Px(30)}
disabled={true}
/>
<Ui.Icon
icon={Ui.Icons.DESKTOP_DOWNLOAD}
size={Ui.Size.Px(30)}
disabled={false}
/>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.