Component · Brand Signature

XA Icon Library

205 unique icons · 5 variants each (default, blue, light, pink, white) · served as SVG from CDN

Variants — tree icon × 5 colours

tree default default
tree blue blue
tree light light
tree pink pink
tree white white

Props: name (string, required) · variant (default | blue | light | pink | white) · size (number, px, default 32) · alt · class 

import { Icon } from '@xa/ui';

<Icon name="tree" />
<Icon name="rocket" variant="blue" size={48} />
<Icon name="gear" variant="white" size={24} alt="Settings" />

All 205 icons · default variant

205 icons
ad ad
ai ai
analysis analysis
anchor anchor
announcement announcement
apple apple
application application
audience audience
automation automation
badge badge
ball ball
battery battery
binary-code binary-code
bitcoin bitcoin
blueprint blueprint
bomb bomb
books books
brain brain
bridge bridge
bucket bucket
cake cake
calendar calendar
car-crash car-crash
cat cat
certificate certificate
chain chain
chain-link chain-link
chair chair
chart chart
chat chat
chat-1 chat-1
chatgpt chatgpt
check check
clean clean
clean-code clean-code
clock clock
cloud cloud
cloud-lab cloud-lab
code code
coffee coffee
coke-can coke-can
compass compass
computer computer
configuration configuration
container container
cookie cookie
cow cow
cpu-core cpu-core
customized customized
database database
day day
decisions decisions
delivery-truck delivery-truck
developer developer
dice dice
dna dna
document document
document-1 document-1
doge doge
dollar dollar
drop-of-water drop-of-water
drop-of-water-1 drop-of-water-1
ear ear
electronic-clock electronic-clock
elephant elephant
email email
empty empty
empty-document empty-document
environment-friendly environment-friendly
eu-flag eu-flag
euro euro
exam exam
exclamation-mark exclamation-mark
filter filter
finish-flag finish-flag
fire fire
folder folder
fridge fridge
gear gear
gem gem
git-branching git-branching
globe globe
graduation-hat graduation-hat
hacker hacker
hammer hammer
hand-with-hammer hand-with-hammer
happy-smiley happy-smiley
heart heart
helm helm
home home
home-1 home-1
hourglass hourglass
infinity-with-arrows infinity-with-arrows
jolly-roger-flag jolly-roger-flag
joystick joystick
key key
lab lab
lifecycle lifecycle
link link
live live
location location
locked-lock locked-lock
lunch lunch
magnet magnet
many-coins many-coins
meter meter
mic mic
mona-lisa mona-lisa
monkey-with-closed-ears monkey-with-closed-ears
monkey-with-closed-eyes monkey-with-closed-eyes
monkey-with-closed-mouth monkey-with-closed-mouth
monolith monolith
moon moon
nail nail
network network
network-1 network-1
night night
no-emotion-smiley no-emotion-smiley
one-coin one-coin
optimize-org optimize-org
org org
organization organization
organization2 organization2
package package
paper-basket paper-basket
path-sign path-sign
pear pear
pen pen
pencil pencil
pipeline pipeline
presentation presentation
presentation-1 presentation-1
presentation-2 presentation-2
price-tag price-tag
printer printer
progress-bar-20pct progress-bar-20pct
progress-bar-50pct progress-bar-50pct
progress-bar-90pct progress-bar-90pct
puzzle-piece puzzle-piece
qa qa
qr-code qr-code
question-mark question-mark
quiz quiz
race-car race-car
recycle-bin recycle-bin
recycling-sign recycling-sign
review review
rip-tomb rip-tomb
risk risk
rocket rocket
sad-smiley sad-smiley
scales scales
screen screen
screw-driver screw-driver
sdlc sdlc
search search
secure-vault secure-vault
security security
server server
shield shield
shit shit
shopping-cart shopping-cart
shuffled-paper shuffled-paper
skull skull
slides slides
snowflake snowflake
sold-out sold-out
soldout soldout
speaker speaker
special-agent special-agent
speedometer speedometer
spreadsheet spreadsheet
star star
sticky-note sticky-note
sun sun
surveillance-camera surveillance-camera
sweep sweep
table table
target target
tasks tasks
tdd tdd
tea tea
testimonial testimonial
thermometer thermometer
thumb-up thumb-up
timebomb timebomb
train train
trainer trainer
tree tree
uk-flag uk-flag
unlocked-lock unlocked-lock
us-flag us-flag
video video
video-call video-call
video-presentation video-presentation
video-recording video-recording
video-stream video-stream
wall wall
webhook webhook
whale whale
wine-bottle wine-bottle
wine-glass wine-glass
workshop workshop
write-down write-down
yarn yarn

Usage

<!-- In any Astro page that depends on @xa/ui -->
import { Icon } from '@xa/ui';

<!-- Default (navy+rose) -->
<Icon name="automation" />

<!-- Blue variant, 48px -->
<Icon name="automation" variant="blue" size={48} />

<!-- All available names: see grid above -->
<!-- CDN base: https://ui.extremeautomation.io/icons/ -->