Theme Documentation
Icon
Component for displaying various icons
Icon Libraries
Search and browse available icons. Click an icon to copy its name.
找到 316 个图标
academic-cap
adjustments-horizontal
adjustments-vertical
archive-box
archive-box-arrow-down
archive-box-x-mark
arrow-down
arrow-down-circle
arrow-down-left
arrow-down-on-square
arrow-down-on-square-stack
arrow-down-right
arrow-down-tray
arrow-left
arrow-left-circle
arrow-left-end-on-rectangle
arrow-left-start-on-rectangle
arrow-long-down
arrow-long-left
arrow-long-right
arrow-long-up
arrow-path
arrow-path-rounded-square
arrow-right
arrow-right-circle
arrow-right-end-on-rectangle
arrow-right-start-on-rectangle
arrow-top-right-on-square
arrow-trending-down
arrow-trending-up
arrow-turn-down-left
arrow-turn-down-right
arrow-turn-left-down
arrow-turn-left-up
arrow-turn-right-down
arrow-turn-right-up
arrow-turn-up-left
arrow-turn-up-right
arrow-up
arrow-up-circle
arrow-up-left
arrow-up-on-square
arrow-up-on-square-stack
arrow-up-right
arrow-up-tray
arrow-uturn-down
arrow-uturn-left
arrow-uturn-right
arrow-uturn-up
arrows-pointing-in
arrows-pointing-out
arrows-right-left
arrows-up-down
at-symbol
backspace
backward
banknotes
bars-2
bars-3
bars-3-bottom-left
bars-3-bottom-right
bars-3-center-left
bars-4
bars-arrow-down
bars-arrow-up
battery-0
battery-100
battery-50
beaker
bell
bell-alert
bell-slash
bell-snooze
bold
bolt
bolt-slash
book-open
bookmark
bookmark-slash
bookmark-square
briefcase
bug-ant
building-library
building-office
building-office-2
building-storefront
cake
calculator
calendar
calendar-date-range
calendar-days
camera
chart-bar
chart-bar-square
chart-pie
chat-bubble-bottom-center
chat-bubble-bottom-center-text
chat-bubble-left
chat-bubble-left-ellipsis
chat-bubble-left-right
chat-bubble-oval-left
chat-bubble-oval-left-ellipsis
check
check-badge
check-circle
chevron-double-down
chevron-double-left
chevron-double-right
chevron-double-up
chevron-down
chevron-left
chevron-right
chevron-up
chevron-up-down
circle-stack
clipboard
clipboard-document
clipboard-document-check
clipboard-document-list
clock
cloud
cloud-arrow-down
cloud-arrow-up
code-bracket
code-bracket-square
cog
cog-6-tooth
cog-8-tooth
command-line
computer-desktop
cpu-chip
credit-card
cube
cube-transparent
currency-bangladeshi
currency-dollar
currency-euro
currency-pound
currency-rupee
currency-yen
cursor-arrow-rays
cursor-arrow-ripple
device-phone-mobile
device-tablet
divide
document
document-arrow-down
document-arrow-up
document-chart-bar
document-check
document-currency-bangladeshi
document-currency-dollar
document-currency-euro
document-currency-pound
document-currency-rupee
document-currency-yen
document-duplicate
document-magnifying-glass
document-minus
document-plus
document-text
ellipsis-horizontal
ellipsis-horizontal-circle
ellipsis-vertical
envelope
envelope-open
equals
exclamation-circle
exclamation-triangle
eye
eye-dropper
eye-slash
face-frown
face-smile
film
finger-print
fire
flag
folder
folder-arrow-down
folder-minus
folder-open
folder-plus
forward
funnel
gif
gift
gift-top
globe-alt
globe-americas
globe-asia-australia
globe-europe-africa
h1
h2
h3
hand-raised
hand-thumb-down
hand-thumb-up
hashtag
heart
home
home-modern
identification
inbox
inbox-arrow-down
inbox-stack
information-circle
italic
key
language
lifebuoy
light-bulb
link
link-slash
list-bullet
lock-closed
lock-open
magnifying-glass
magnifying-glass-circle
magnifying-glass-minus
magnifying-glass-plus
map
map-pin
megaphone
microphone
minus
minus-circle
moon
musical-note
newspaper
no-symbol
numbered-list
paint-brush
paper-airplane
paper-clip
pause
pause-circle
pencil
pencil-square
percent-badge
phone
phone-arrow-down-left
phone-arrow-up-right
phone-x-mark
photo
play
play-circle
play-pause
plus
plus-circle
power
presentation-chart-bar
presentation-chart-line
printer
puzzle-piece
qr-code
question-mark-circle
queue-list
radio
receipt-percent
receipt-refund
rectangle-group
rectangle-stack
rocket-launch
rss
scale
scissors
server
server-stack
share
shield-check
shield-exclamation
shopping-bag
shopping-cart
signal
signal-slash
slash
sparkles
speaker-wave
speaker-x-mark
square-2-stack
square-3-stack-3d
squares-2x2
squares-plus
star
stop
stop-circle
strikethrough
sun
swatch
table-cells
tag
ticket
trash
trophy
truck
tv
underline
user
user-circle
user-group
user-minus
user-plus
users
variable
video-camera
video-camera-slash
view-columns
viewfinder-circle
wallet
wifi
window
wrench
wrench-screwdriver
x-circle
x-mark
Component Examples
Basic Usage
Basic icon usage, simply pass the icon name
300px
Icon Sizes
Control icon size with the size prop, supports sizes from xs to 9xl
300px
Icon Colors
Set icon color by adding class attributes, supports all Tailwind color classes
300px
Icon Style
Icons support both outline (default) and solid styles
300px
Component Properties
| Property | Description | Type | Default |
|---|---|---|---|
| name | The name of the icon, supports all icons from various icon libraries | string | |
| size | The size of the icon, available values are xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl | string | md |
| solid | Set whether the icon should be solid, default is false (outline style) | boolean | false |
Design Empowers, Innovation Unlimited