Icon
Ícone do Arrow Design System. Renderiza um dos 868 ícones da biblioteca oficial, seguindo a Dimensão 08 · Iconografia: viewBox 24, stroke 2px, currentColor, 4 tamanhos.
Playground
Importação
ts
import { Icon } from '@arrow/components-vue'
// Tree-shakeable: importe só os ícones que usar
import { AlarmCheck } from '@arrow/components-vue/icons'Uso básico
Use a prop name (kebab-case) com o registro instalado, ou :icon com o dado importado (tree-shakeable).
vue
<Icon name="activity" />
<Icon name="alarm-check" />
<Icon name="file-x-01" />Tamanhos
A prop size aceita os 4 tamanhos canônicos dos Fundamentos: 16 / 20 / 24 / 32 — por número ou pelos tokens compact / default / comfortable / prominent.
vue
<Icon name="activity" size="compact" /> <!-- 16 -->
<Icon name="activity" size="default" /> <!-- 20 (padrão) -->
<Icon name="activity" size="comfortable" /> <!-- 24 -->
<Icon name="activity" size="prominent" /> <!-- 32 -->Cor
O ícone herda a cor do contexto via currentColor. Use a prop color (qualquer valor CSS, incl. tokens) pra sobrescrever.
vue
<!-- herda do pai -->
<span style="color:#0092be"><Icon name="alarm-check" /></span>
<!-- cor explícita (hex, rgb, var() de token…) -->
<Icon name="alarm-check" color="#1a7f37" />
<Icon name="alarm-check" color="var(--icon-color-feedback-error)" />Biblioteca (868 ícones)
activity
add-square-01
add-square-02
add-square-03
add-square-04
alarm-01
alarm-02
alarm-03
alarm-04
alarm-05
alarm-06
alarm-check
alarm-minus
alarm-off
alarm-plus
alert-circle
alert-square
alert-triangle
align-center
align-down-01
align-down-02
align-horizontal-center-01
align-horizontal-center-02
align-horizontal-center-03
align-justify
align-left-01
align-left-02
align-left
align-right-01
align-right-02
align-right
align-up-01
align-up-02
align-vertical-center-01
align-vertical-center-02
align-vertical-center-03
annotation-alert
annotation-check
annotation-information
annotation-plus
annotation-typing
annotation-x
annotation
arrow-curve-left-down
arrow-curve-left-right
arrow-curve-left-up
arrow-curve-right-up
arrow-curve-up-left
arrow-curve-up-right
arrow-down-contained-01
arrow-down-contained-02
arrow-down-left-1
arrow-down-left-contained
arrow-down-left-sm
arrow-down-left-square-contained
arrow-down-left
arrow-down-right-1
arrow-down-right-contained
arrow-down-right-sm
arrow-down-right-square-contained
arrow-down-right
arrow-down-square-contained
arrow-expand-01
arrow-expand-02
arrow-expand-03
arrow-expand-04
arrow-left-contained-01
arrow-left-contained-02
arrow-left-sm
arrow-left-square-contained
arrow-left
arrow-refresh-01
arrow-refresh-02
arrow-refresh-03
arrow-refresh-04
arrow-refresh-05
arrow-refresh-06
arrow-right-contained-01
arrow-right-contained-02
arrow-right-sm
arrow-right-square-contained
arrow-right
arrow-rotate-left-01
arrow-rotate-left-02
arrow-rotate-right-01
arrow-rotate-right-02
arrow-switch-horizontal-1
arrow-switch-horizontal
arrow-up-contained-01
arrow-up-contained-02
arrow-up-left-contained
arrow-up-left-sm
arrow-up-left-square-contained
arrow-up-left
arrow-up-right-contained
arrow-up-right-sm
arrow-up-right-square-contained
arrow-up-right
arrow-up-sm
arrow-up-square-contained
arrow-up
atom
attatchment-01
attatchment-02
audio-settings-01
audio-settings-02
bag-01
bag-02
bag-03
bag-04
bag-05
bank-note-01
bank-note-02
bank-note-03
bank-note-04
bank-note-05
bank-note-06
bank
bar-chart-01
bar-chart-02
bar-chart-03
bar-chart-04
bar-chart-05
bar-chart-square-01
bar-chart-square-02
bar-chart-square-03
bar-chart-square-down-01
bar-chart-square-down-02
bar-chart-square-up-01-1
bar-chart-square-up-01
bar-group-01
bar-group-02
bar-group-03
battery-01
battery-02
battery-03
battery-04
battery-empty
battery-fill-01
battery-fill-02
battery-fill-04
bell-01
bell-02
bell-03
bell-04
bell-off-01
bell-off-02
bell-ringing-01
bell-ringing-02
bell-ringing-03
bell-ringing-04
bezier-01
bezier-02
bluetooth-01
bluetooth-02
bold-01
bold-02
book-01
book-02
book-03
book-04
book-05
book-06
box
brackets-check
brackets-minus
brackets-plus
brackets-slash
brackets-typing
brackets-x
brackets
browser-code
browser
calculator-01
calculator-02-1
calculator-02
calendar-01
calendar-02
calendar-03
calendar-04
calendar-05
calendar-06
calendar-07
calendar-check
calendar-minus
calendar-number
calendar-plus
camera-01
camera-02
camera-lens
camera-off
cancel-left
cancel-right
car
card-01
card-02
card-add
card-check
card-down
card-edit
card-lock
card-minus
card-number
card-shield
card-up
card-x
cart
center
chart-breakout-circle
chart-breakout-square
check-01
check-02
check-broken
check-contained
check-square-broken
check-square-contained
chevron-double-down
chevron-double-left
chevron-double-right
chevron-double-up
chevron-down
chevron-left
chevron-right
chevron-up
chromecast
circle
clock-01
clock-backward
clock-check
clock-forward
clock-plus
cloud-01
cloud-02
cloud-03
cloud-04
cloud-lightning
cloud-rain
cloud-snow
cloud-sun
code-01
code-02
code-03
code-04
coin-broken
coin-hand
coin-number
coin-unbroken
coins-rotate
coins
color-picker
color-swatch-01
color-swatch-02
colors-01
colors-02
column-horizontal-01
column-horizontal-02
column-horizontal-03
column-vertical-01
column-vertical-02
column-vertical-03
compare
compass-1
compass-2
compass
component
computer
contrast
copy-left
copy-right
crop-01
crop-02
currency-bath
currency-bitcoin
currency-cent
currency-coin-bath
currency-coin-bitcoin
currency-coin-cent
currency-coin-dollar
currency-coin-euro
currency-coin-pound
currency-coin-rubel
currency-coin-rupee
currency-coin-yen
currency-dollar
currency-euro
currency-pound
currency-rubel
currency-rupee
currency-yen
cursor-01
cursor-02
cursor-03
cursor-04
cursor-05
cursor-06
dash
data-01
data-02
data-03
data-04
delete
delivery
diamond-1
diamond
disc
discount-circle
discount-square
discount-star-01
discount-star-02
discount-star-03
divider
dot-horizontal-filled
dot-horizontal
dot-vertical
down-arrow-sm
down-arrow
download-01
download-02
download
drop
edit-01
edit-02
edit-03
edit-04
edit-contained
email
embed
equals-not
equals
eraser-01
eraser-02
expand-02
expand
eye-closed
eye-open
face-id-01
face-id-02
fast-backward
fast-forward
favourite
feather-01
feather-02
file-01
file-02
file-03
file-04
file-05
file-06
file-attach-01
file-attach-02
file-attach-03
file-branch
file-check-01
file-check-02
file-code
file-down-01
file-down-02
file-edit-01
file-edit-02
file-eye-01
file-eye-02
file-lock-01
file-lock-02
file-lock-03
file-minus-01
file-minus-02
file-multiple
file-none
file-plus-01
file-plus-02
file-question-01
file-question-02
file-return-01
file-return-02
file-search-01
file-search-02
file-shield-01
file-shield-02
file-shield-03
file-shred
file-up-01
file-up-02
file-x-01
file-x-02
file
filter
fingerpint-01
fingerpint-02
flame-01
flash-off
flash-on
flex-align-bottom-01
flex-align-center-01
flex-align-left-01
flex-align-right-01
flex-align-spaced-01
flex-align-top-01
flex-columns
flex-rows
flip-01
flip-02
flip-left
flip-right
folder-code
folder-down-01
folder-down-02
folder-minus-01-1
folder-minus-01
folder-open-01
folder-open-02
folder-open-03
folder-plus-01
folder-plus-02
folder-search-01
folder-search-02
folder-shield
folder-up-01
folder-up-02
folder-x-01
folder-x-02
folder
gear
gift-01
gift-02
git-branch-01
git-branch-02
git-branch-03
git-branch-04
git-branch-05
glasses-01-1
glasses-01-2
glasses-01
glasses-02
globe-01-1
globe-01
globe-02-1
globe-02
globe-03
globe-04
globe-05
globe
graduation-cap-01
graduation-cap-02
grid-01
grid-02
grid-03
grid-04-filled
hash-01
hash-02
header-01
header-02
headphones
heart
help-circle-contained
help-square-contained
help
hexagon
home-01
home-02
home-03
home-04
home-05
horizontal-chart-01
horizontal-chart-02
horizontal-chart-03
hourglass-01
hourglass-02
hourglass-03
image-01
image-02
image-03
image-04
image-add
image-avatar
image-check
image-down
image-focus
image-indent-left
image-indent-right
image-minus
image-no-borders
image-question
image-up
image-x
image
inbox-01
inbox-02
indent-decrease
indent-increase
indent-left
indent-right
info-square-01-contained
info-square-02-contained-filled
information-circle-contained
intersect
iphone-02
italics-01
italics-02
key-01
key-02
keyboard
laptop-01
laptop-02
layers-01
layers-02
layers-03
layers-04
layers-05
layout-01
layout-02
layout-03
layout-04
layout-bottom
layout-grid-01
layout-left
layout-right
layout-scale
layout-top
letter-spacing-01
letter-spacing-02
letter-spacing-03
lightbulb-01
lightbulb-02
lightbulb-03
lightning-01
lightning-02
lightning-circle-contained
lightning-filled
lightning-square-contained
line-chart-down-01
line-chart-down-02
line-chart-up-01
line-chart-up-02
line-height
link-angled
link-broken
link-external
link
list-numbers
list
loader-01
loader-02
lock-01
lock-02
lock-03
lock-04
lock-open-01
lock-open-02
lock-open-03
lock-open-04
logout-01
logout-02
logout-03
logout-04
luggage-01
luggage-02
luggage-03
luggage-04
mail-01
mail-02
mail-03
mail-04
mail-05
map-01-1
map-01
map-02
map-03
map-04
marker-01
marker-02
marker-03
marker-04
marker-05
marker-06
maximise-01
maximise-02
media-strip-01
media-strip-02
menu-01
menu-02
menu-03
menu-04
menu-05
message-alert-circle
message-alert-plus
message-chat-01-1
message-chat-01
message-circle
message-notify-circle
message-notify-square
message-square-alert
message-square-information
message-square-plus-1
message-square-plus
message-square-typing
message-square-x
message-square
message-text-01
message-text-02
message-typing
message-x
microphone-01
microphone-02
microphone-off-01
microphone-off-02
minimise-01
minimise-02
minus-circle-contained
minus-square-contained
moon-01
moon-02
mouse
move
note-01
note-02
notification-box
notification-bubble
notification-square-01
notification-square-02
octagon
overlap
package-01
package-02
package-check
package-minus
package-plus
package-x
paint-bucket-01
paint-bucket-02
palette
paperclip-01
paperclip-02
paperclip
passport
password-01
password-02
pause-01
pause-02
pause-03
pen-tool-01
pen-tool-02
pen-tool-03
pen-tool-04
pencil-01
pencil-02
pencil-03
pentagon
percent-01
percent-02
percent-03
perspective
phone-call-01
phone-call-02
phone-down
phone-incoming-01
phone-incoming-02
phone-off
phone-outgoing-01
phone-outgoing-02
phone-up
phone-x
phone
pie-chart-01
pie-chart-02
pie-chart-03
plane
play-01
play-02
play-03
plug-01
plus-01
plus-02
plus-03
pointer-01
pointer-02
power
presentation-01
presentation-02
presentation-03
progress
quote
receipt-lines
receipt
refresh-01-1
refresh-01
rss
ruler
save-01
save-02
scale-01
scale-02
scale-03
scan
scissors-01
scissors-02
scissors-03
scissors-04
search-01
search-02
send-01
send-02
send-03
server-01
server-02
server-03
server-04
server-05
server-06
server-down
server-up
settings
share-1
share
shield-01
shield-02
shield-check
shield-plus
shuffle
signal
skew
skip-back
skip-forward
slash-01-backward
slash-01-forward
slash-02-forward-1
slash-02-forward
smiley-happy-plus
smiley-happy
smiley-neutral
smiley-sad
smiley-wink
snowflake
sort-horizontal
sort-vertical-01
sort-vertical-02
space-height
space-horizontal
space-vertical
space-width
speaker
square
star-01
star-02
stars
stop-01
stop-02
stop-circle-contained
stopwatch-01
stopwatch-02
stopwatch-03
stopwatch-04
stopwatch-05
stopwatch-off
stopwatch-snooze
sun-02
sun-03
sun-down
sun-up
superscript
table
tag
target-01-1
target-01
target-02-1
target-02
target-03
target-04
temperature-01
temperature-02
temperature-03
temperature-04
terminal
text-input-01
text-input-02
thumb-down
thumb-up
ticket-01
ticket-02
toggle-right
toogle-left
train
transform
trash-01
trash-02
trash-03
trash-04
trend-down-01
trend-down-02
trend-up-01
trend-up-02
triangle
truck
tv
type-01
type-02
type-03
type-strike-01
type-strike-02
umbrella-01
umbrella-02
umbrella
underline-01
underline-02
union
upload-01
upload-02
upload-03
upload-04
user-profile-01
user-profile-02
user-profile-03-1
user-profile-03
user-profile-add-01
user-profile-add-02
user-profile-check
user-profile-circle
user-profile-down
user-profile-group
user-profile-left
user-profile-minus
user-profile-right
user-profile-square
user-profile-star
user-profile-up
user-profile-x
users-profiles-01
users-profiles-02
users-profiles-03
users-profiles-check
users-profiles-down
users-profiles-left
users-profiles-minus
users-profiles-plus
users-profiles-right
users-profiles-up
users-profiles-x
variant
video-off
video-on
volume-01
volume-02
volume-03
volume-04
volume-05
volume-06
volume-07
wallert-04
wallet-01
wallet-02
wallet-03
watch-01
watch-02
waveform
webcam
wifi-off
wifi-on
wind-01
wind-02
wind-03
wrench
x-01
x-02
x-03
x-circle-contained
x-square-contained
youtube
zoom-in
zoom-out
API
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
name | string | — | Nome kebab-case do ícone. Requer o ArrowIconsPlugin instalado. |
icon | ArrowIconData | — | Dado do ícone (import direto, tree-shakeable). Tem prioridade sobre name. |
size | 16 | 20 | 24 | 32 | 'compact' | 'default' | 'comfortable' | 'prominent' | 'default' | Tamanho. Apenas os 4 da escala dos Fundamentos. |
color | string | — | Cor CSS. Padrão: herda via currentColor. |
label | string | — | Rótulo acessível. Sem ele, o ícone é decorativo (aria-hidden). |
Acessibilidade
- Com
label, o SVG receberole="img"+aria-label. - Sem
label, recebearia-hidden="true"(ícone decorativo) — não polui leitores de tela.
Migração do legado
Este Icon substitui o antigo MeIcon. Sem variant de cor, sem fallback pra Material Icons e sem tamanhos fora da escala — a cor agora é hierarquia (token + currentColor) e o tamanho segue os Fundamentos.