Skip to content Skip to footer navigation
Light theme Dark theme
You are reading the Statamic 6 Alpha docs. 👀

Icon

You may use many icons from the streamline icon set.

<ui-icon name="bell" />

<ui-icon name="ai-spark" />

<ui-icon name="web" />

Sizing Icons#

The best way to size your icons is with a simple Tailwind class.

<ui-icon name="ai-spark" class="size-8" />

All Icons#

add-bookmark
add-circle
add-col-after
add-col-before
add-entry
add-folder
add-group
add-item
add-link
add-list
add-row-after
add-row-before
add-section
add-sticky
add-table
add-tag
add-user
addons
ai-automate-lightning-bolt-spark
ai-chat-spark
ai-generate-voice-spark-1
ai-promp-spark
ai-search-spark
ai-spark
ai-sparks
alert-alarm-bell
alert-warning-exclamation-mark
align-left
align-object-bottom
align-object-center
align-object-top
align-right
alt
amazon-logo
android-logo
apple-logo
arrow-down
arrow-left-box
arrow-left
arrow-right-box
arrow-right
arrow-roadmap-path-flow
arrow-up-right
arrows-fit-to-height
arrows-fit-to-width
asset-folder
assets
avatar
bar-bottom-panel-close
bar-bottom-panel-open
bar-sidebar-left-panel-open
bar-sidebar-right-panel-open
bar-top-panel-close
bar-top-panel-open
bell
blueprint-edit
blueprints
book-next-page
book-prev-page
bookmark
building-generic
building-government
building-store-factory
buildings-city-hall
burger-menu
cache
calendar-date
calendar
chart-monitoring-indicator
charts-donut-graph
checkmark
chevron-down
chevron-left
chevron-right
chevron-vertical
clipboard-check
clipboard
clover
code-block
code-inline
cog-solid
cog
collapse-all
collapse-vertical
collapse
collections
columns
command
computer-desktop
computer-laptop
computer-logo-communication-zoom
computer-retro
computer-voice-mail-microphone
configure
construction-barrier
container-add
content-book-open
credit-card
cursor-click
dashboard-layout-2
dashboard-layout-3
dashboard-layout-4
dashboard-layout-5
dashboard-layout-6
dashboard-layout-7
dashboard-layout
dashboard
delete
dictionary-language-book
direction-buttons
docs
document-certificate
dots
down-square
download-arrow-down
download
duplicate
earth
edit-design-compare-ab-testing
edit-paint-palette
edit-pen-draw-scribble
edit-pen
edit-pin
edit-scissors-cut
edit
entry
eraser
expand-all
expand-vertical
expand
external-link-original
external-link
eye-closed
eye-slash
eye
favorite-award-prize
favorite-dislike
favorite-heart
favorite-like
favorite-star-badge
favorite-star
favorite-stars
favorite-trophy
fieldsets
fieldtype-array
fieldtype-assets
fieldtype-bard
fieldtype-button_group
fieldtype-checkboxes
fieldtype-code
fieldtype-collections
fieldtype-color
fieldtype-date
fieldtype-dictionary
fieldtype-entries
fieldtype-float
fieldtype-form
fieldtype-grid
fieldtype-group
fieldtype-hidden
fieldtype-html
fieldtype-icon_picker
fieldtype-integer
fieldtype-link
fieldtype-list
fieldtype-markdown
fieldtype-navigation
fieldtype-radio
fieldtype-range
fieldtype-replicator
fieldtype-revealer
fieldtype-section
fieldtype-select
fieldtype-sites
fieldtype-slug
fieldtype-spacer
fieldtype-structures
fieldtype-table
fieldtype-taggable
fieldtype-taxonomy
fieldtype-template
fieldtype-text
fieldtype-textarea
fieldtype-time
fieldtype-toggle
fieldtype-user_groups
fieldtype-user_roles
fieldtype-users
fieldtype-video
fieldtype-width
fieldtype-yaml
file-content-list
file-zip
filter
fingerprint
fire-flame-burn-hot
fit-height
fit-width
flash-bolt-lightning
flip-vertical-square-2
focus
folder-add
folder-ai
folder-block
folder-check
folder-download
folder-edit
folder-ghost
folder-history
folder-lock
folder-music
folder-open
folder-photos
folder-play
folder-remove
folder-settings
folder-warning
folder
food-menu-book
form-address-field
form-date-picker
form-drop-down-menu
form-text-field
forms
gift-present-surprise
git
globals
globe-arrow
globe-world-wide-web
graphic-template-website-ui
graphql
groups
h1
h2
h3
h4
h5
h6
handles-sm
handles
heart
hero-image-above-text
hero-image-screen-curved
hero-image-screen-panoramic
hierarchy-hub-integration-connection
hierarchy-vertical-nav-flow
hierarchy
history
home-house
home
hr
id-face-scan
info-square
info
insert-image
insert-link
key
labs-idea-experimental-flask
layers-stacks
layout-bottom-bar
layout-carousel-horizontal-2
layout-carousel-horizontal
layout-flip-left
layout-flip-right
layout-flip-up
layout-four-columns
layout-four-rows
layout-grid
layout-haeder-three-columns
layout-header-sidebar-left
layout-header-sidebar-right
layout-header-sidebar-split-right
layout-header-two-columns-two-rows
layout-header-two-columns
layout-header
layout-hero-four-columns
layout-hero-three-columns
layout-hero-two-columns
layout-list
layout-masonry-horizontal
layout-masonry-vertical
layout-masonry
layout-right-sidebar
layout-sidebar-five-rows
layout-sidebar-left-three-rows
layout-sidebar-left
layout-sidebar-right
layout-sidebar-split-left
layout-sidebar-split-right
layout-split-header-full-main
layout-split-header-three-columns
layout-split-header-two-rows
layout-split-horitontal
layout-split-right
layout-three-columns-three-rows
layout-three-columns
layout-three-rows
layout-top-bar
layout-two-columns-three-rows
layout-two-columns
license
lightbulb-idea
link
list-ol
list-ul
live-preview
loading
login-key-2
magic-wand-action
magnet-action
magnifying-glass
mail-chat-bubble-text
mail-check
mail-inbox-content
mail-send-email-attachment-document
mail-settings
mail-sign-at
mail-sign-hashtag
mail
map-search
markdown
mask
math-plus-minus-arithmetic
maximize-1
maximize-2
maximize
medal-badge-star
media-computer-screen-tv
media-image-camera
media-image-photo-focus-frame
media-image-picture-gallery
media-music-notes
media-music-sound-equalizer
media-news-paper
media-playlist
media-ticket
megaphone
memory
minimize
money-atm-card
money-bag-dollar
money-bank
money-cash-bill
money-cashier-bar-code
money-cashier-calculator
money-cashier-price-tag
money-graph-bar-decrease
money-graph-bar-increase
money-graph-pie-chart
monitor
moon
move-folder
moved
movie-video-clip
nature-leaf
navigation
node-connect
orientation-image-picture-horitontal-landscape
orientation-image-picture-vertical-portrait
package-box-crate
padlock-locked
padlock-unlocked
page-ghost
page-width-full
page-width-normal
page-width-wide
page
palette
paragraph-align-center
paragraph-align-justified
paragraph-align-left
paragraph-align-right
pdf
pencil-line
pencil
permissions
person-running
phone-contact-phonebook
phone-lock
phone-mode-airplane-enabled
phone-telephone-call
piano-keys
pin
playground
plus
poopies
preferences
presentation-board
pro-ribbon
programming-code-block
programming-module-box-cube
programming-rss-feed
programming-script-code-brackets
programming-script-code
pulse-heartbeat-monitor-health
pulse
puzzle-complete
puzzle-piece
quote
rename
replace
return-square
rewind
rss
save
scaffold
script
search-magnifying-glass
security-lock
security-unlock
setting-cog-gear
setting-menu-horizontal-dots
setting-slider-vertical
share-link
share-mega-phone
shopping-cart
shopping-categories-shirt
shopping-jewelry-diamond-gem
shopping-store-discount-percent
shopping-store-signage
shopping-store
shrink
sidebar-collapses
sidebar-expand
sign-in
sign-out
site-settings
site
slider
sliders-horizontal
sliders-vertical
social-behance-logo
social-bluesky-logo
social-discord-logo
social-dropbox-logo
social-facebook-logo
social-github-logo
social-google-logo
social-instagram-logo
social-linkedin-logo
social-mastodon-logo
social-meta-logo
social-meta-threads-logo
social-patreon-logo
social-pinterest-logo
social-reddit-logo
social-telegram-logo
social-tiktok-logo
social-twitch-logo
social-twitter-logo
social-vimeo-logo-1
social-whatsapp-logo
social-windows-logo
social-x-twitter-logo
social-youtube-logo
social0paypal-logo
split-window
star-half
star
steps
subscript
sun
superscript
support
sync
synced
tabs-sections
tag-free
tag-new
target-aim-bulleye
target-aim
taxonomies
team
template-theme-design-layout
text-bold
text-formatting-all-caps
text-formatting-ampersand
text-formatting-image-bottom
text-formatting-image-left
text-formatting-image-right
text-formatting-image-top
text-formatting-initial-letter
text-formatting-input-signature
text-formatting-layer-style
text-formatting-markdown
text-formatting-paragraph
text-formatting-quotation
text-formatting-shadow-text
text-formatting-text-box-1
text-formatting-type-cursor
text-formatting-wrap-around-bounding-box
text-formatting-wrap-image-left
text-formatting-wrap-image-margin-left
text-formatting-wrap-image-margin-right
text-formatting-wrap-image-right
text-italic
text-small
text-strike-through
text-underline
time-clock
time-now
timeline-roadmap-horizontal
timeline-roadmap-vertical
trash
travel-map
tree-collapse
tree-expand
triangle-arrow-split-vertical-up-2
ui-browser-slider-2
ui-phone-slider-vertical
unsynced
up-down
up-square
updates
upload-arrow-up
upload-cloud
upload
user-avatar
user-edit
users
utilities
view-side-by-side
visit-website
wand
warning-diamond
web
workflow
x-square
x
zoom-fit-screen

Custom sets#

You may register additional icon sets and then reference them from the component with the set prop.

<ui-icon name="academic-cap" set="heroicons" />

Register them using the registry API using a glob import. This will include all the icons in the directory in your JS bundle.

import { registerIconSet } from '@statamic/ui';



registerIconSet('heroicons', import.meta.glob(

    './path/to/heroicons/*.svg',

    { query: '?raw', import: 'default' }

));

If you have a situation where you need custom icons that cannot be included in the bundle (for example, how Statamic itself allows you to bring your own icons), you can provide them as strings.

import { registerIconSetFromStrings } from '@statamic/ui';



registerIconSetFromStrings('heroicons', {

    'academic-cap': '<svg>...</svg>',

    'adjustments-horizontal': '<svg>...</svg>',

});