Icon

Updated:: 11/24/2024

Provides image representations of states or actions.

Search for Icons

0.5

1.5

Default (2)

Standard Icons

a11y
add
airplane
alarm-clock
ambulance
apple
arrow-down
arrow-left
arrow-right
arrow-up
arts
atv
backpack
bank
barchart
barchart-trend
bed
bell
bicycle
boat
box
briefcase
bubble-graph
bug
buildings
buildings-2
calculator
calendar
calendar-create
calendar-pay
calendar-remove
calendar-repeat
calendar-skip
calendar-time
camera
car
car-front
cart
cart-moving
cash
cash-bills
cash-coins
cash-in-hand
cash-register
certificate
check
check-add
check-dollar
check-edit
check-remove
check-shield
checkmark
checkmark-outline
chevron-double-right
chevron-double-left
chevron-down
chevron-left
chevron-right
chevron-up
clipboard
close
coins
compass
conversation
copy
coupon
credit-score
dashboard
delivery-truck
divider
diploma
document
document-add
document-checklist
document-remove
download
drag-handle
edit
ellipsis
external-link
eye-hide
eye-show
face-id
factory
failed
filebox
filter
fingerprint
flag
gear
gift
gold-bars
government
gps
graduation-cap
grid-x2
grid-x3
hamburger-menu
hand
hand-with-coins
hand-with-key
handshake
headset
health
heart
heart-add
heart-remove
home
home-chimney
home-gear
id-badge
inbox
inbox-checked
inbox-full
key
law
leaf
lightbulb
linechart
linechart-trend
link
list
location
location-base
location-prohibited
lock
logout
loop
mail
math
medal
megaphone
message-forward
message-reply
message-response
microscope
mobile-fast-dollar
money-time
mortgage
motorcycle
motorhome
mountains
movie
music
nest-egg
newspaper
options
palette
paper-plane
paperclip
pause
paw
people
people-group
percent
person
person-add
person-lock
person-remove
person-settings
person-to-person
personal-care
piechart
piechart-expanded
piggy-bank
play
pricetag
pricetag-blank
pricetag-time
print
prohibited
question
receipt
receipt-list
receipt-list-top
receipt-top
refresh
remove
repeat
repeat-time
ribbon
ring
roadblock
save
school
search
section
service
shield
sign
sign-closed
sign-open
sign-sale
sign-sold
silverware
skip
sort
speedometer
split
star
star-add
star-remove
statements
steering-wheel
stop-payment
storefront
storefront-add
storefront-prohibited
storefront-remove
storefront-settings
target
taxi
time
todo
tools
tractor
transfer
transfer-receive
transfer-send
trash
tree
truck-with-lock
umbrella
unlink
upload
virus
wallet
watch
world
zoom-in
zoom-out

Status

info
info-filled
success
success-filled
warning
warning-filled
error
error-filled

Brands

brand-autobooks-color
brand-autobooks-filled
brand-facebook-color
brand-facebook-filled
brand-instagram-color
brand-instagram-filled
brand-linkedin-color
brand-linkedin-filled
brand-messenger-color
brand-messenger-filled
brand-payrecs-color
brand-payrecs-filled
brand-snapchat-color
brand-snapchat-filled
brand-twitter-color
brand-twitter-filled
brand-x-color
brand-x-filled
venmo-colored
venmo-filled
brand-vimeo-color
brand-vimeo-filled
brand-youtube-color
brand-youtube-filled
brand-zelle-color
brand-zelle-filled
brand-zelle-name-color
brand-zelle-name-filled

Browsers and Operating Systems (OS)

android
ios
browser-chrome
browser-chrome-color
browser-chrome-filled
browser-edge
browser-edge-color
browser-edge-filled
browser-firefox
browser-firefox-color
browser-firefox-filled
browser-ie
browser-ie-color
browser-ie-filled
browser-opera
browser-opera-color
browser-opera-filled
browser-safari
browser-safari-color
browser-safari-filled
os-android
os-android-color
os-android-filled
os-apple
os-apple-color
os-apple-filled
os-windows
os-windows-color
os-windows-filled

Cards

card
card-edit
card-add
card-heart
card-gift
card-insert
card-join
card-in-hand
card-locked
card-more
card-prohibited
card-remove
card-scissors
card-star
card-success
card-unknown
card-update
card-amazon
card-amazon-color
card-amex
card-amex-color
card-applepay
card-applepay-color
card-bitcoin
card-bitcoin-color
card-dinersclub
card-dinersclub-color
card-discover
card-discover-color
card-googlepay
card-googlepay-color
card-jcb
card-jcb-color
card-maestro
card-maestro-color
card-mastercard
card-mastercard-color
card-paypal
card-paypal-color
card-stripe
card-stripe-color
card-visa
card-visa-color

Communication

call-color
call-filled
chat
chat-question
chat-bubbles
chat-round
rss-color
rss-filled
sms-color
sms-filled

Currencies

currency-dollar
currency-dollar-circle
currency-euro
currency-pound
currency-yen

Gestures

gesture-hand
gesture-scroll-horizontal
gesture-scroll-vertical
gesture-stretch
gesture-swipe-down
gesture-swipe-left
gesture-swipe-right
gesture-swipe-up
gesture-tap

Mobile

mobile-button
mobile-edit
mobile-heart
mobile-location
mobile-lock
mobile-remove
mobile-rotate
mobile-search
mobile-settings
mobile-time

Filetypes

filetype-csv
filetype-doc
filetype-docx
filetype-gif
filetype-iso
filetype-jpg
filetype-otf
filetype-pdf
filetype-png
filetype-svg
filetype-txt
filetype-xlsx
filetype-xml

Devices

desktop
laptop
phone
tablet

Suffix Meanings

Our icon library categorizes icons based on their visual attributes using specific suffixes. Here's a breakdown of what these suffixes indicate:

-color: Icons with the -color suffix use the standard color scheme specific to their representation. These icons are usually colored versions of what might otherwise be line drawings. Examples include os-windows-color, brand-youtube-color, browser-firefox-color, and rss-color.
-filled: This suffix denotes icons that are predominantly filled rather than outlined. While these icons often have -color variants (e.g., browser-chrome-color), the -filled versions are designed to be easily customizable with different colors. This makes them versatile for various styling needs.

Additionally, it's important to note that some line drawing icons may include elements that can be filled, such as star-remove or statements. However, these are less commonly used.

This naming convention helps users quickly identify the visual characteristics of icons and choose the appropriate style for their applications.

Properties

Learn more about properties.

inline

Styles the component to have a height and width of 1em, making it easy to place alongside text.

label

The text that is presented by screen-readers when they encounter the icon.

type

The name of the icon to be displayed.

Dependencies

This component uses other components in the Tecton library, including:

Dependents

Other components in the Tecton library use this component, including:

q2-action-sheet
q2-avatar
q2-calendar
q2-card
q2-carousel
q2-chart-donut
q2-checkbox
q2-checkbox-group
q2-data-table
q2-dropdown
q2-dropdown-item
q2-editable-field
q2-file-picker
q2-input
q2-link
q2-message
q2-modal
q2-month-picker
q2-option
q2-pagination
q2-pill
q2-radio-group
q2-section
q2-stepper
q2-stepper-vertical
q2-tab-container
q2-tag
q2-textarea

Release Notes

Initial Release

Updated icon set and moved to SVG sprites

The following CSS variables are available to override the default theme styles of the q2-iconcomponent.