# Icons V2

O componente c-icon permite inserir ícones facilmente em outros componentes ou em qualquer outra área de suas páginas

Essa é uma nova versão do componente considerada como V2. Ela usa como base a biblioteca de ícones open source Remix Icon (opens new window). Isso faz com que seja possível acessar por volta de 1700 ícones (tanto outline como fill).

Para consultar os ícones disponíveis

Exemplos

API

Veja na aba API como instalar e utilizar esse componente!

# Simples

<c-icon />
<c-icon />

# Ícones

A maioria dos ícones possui ambas as versões (outline e fill) disponíveis (o que pode ser checado na nossa lista de ícones abaixo). Por padrão os ícones sem o sufixo -fill serão renderizados como outline, e com o sufixo como fill.

Para os nomes, basta copiar da nossa lista aqui no site ou do Figma (opens new window).

<c-icon name="code-box" />
<c-icon name="code-box-fill" />
<c-icon name="github" />
<c-icon name="github-fill" />
<c-icon name="emotion-laugh" />
<c-icon name="emotion-laugh-fill" />
<c-icon name="fire" />
<c-icon name="fire-fill" />
<c-icon name="code-box" />
<c-icon name="code-box-fill" />
<c-icon name="github" />
<c-icon name="github-fill" />
<c-icon name="emotion-laugh" />
<c-icon name="emotion-laugh-fill" />
<c-icon name="fire" />
<c-icon name="fire-fill" />

# Cor

Por padrão o componente já respeita a cor atual do texto pai usando a keyword currentColor (opens new window).

Ainda é possível passar qualquer valor CSS válido, como variáveis de cor do próprio DS (--c-color-primary), RGBs, Hexadecimais, etc.

<div style="color: var(--c-color-primary)">
  <c-icon />
</div>
<c-icon color="var(--c-color-red-500)" />
<c-icon color="#000" />
<div style="color: pink;">
  <c-icon />
</div>
<div style="color: var(--c-color-primary)">
  <c-icon />
</div>
<c-icon color="var(--c-color-red-500)" />
<c-icon color="#000" />
<div style="color: pink;">
  <c-icon />
</div>

# Tamanhos diferentes

É possível tanto passar um tamanho padrão como small, medium e large, como também especificar o tamanho necessário com um número.

<c-icon size="small" />
<c-icon :size="100" />
<c-icon size="small" />
<c-icon :size="100" />

# Hover automático entre outline <=> fill

Com a prop de reverse-hover é possível automáticamente já ter um efeito de hover entre outline e fill, facilitando alguns use cases.

<c-icon  name="bank" reverse-hover />
<c-icon  name="bank-fill" reverse-hover />
<c-icon  name="bank" reverse-hover />
<c-icon  name="bank-fill" reverse-hover />

# Acessibilidade

Para a melhor experiência possível nos leitores de tela...(em progresso)

# Lista de Ícones

bank fill:

building fill:

community fill:

government fill:

home-gear fill:

home-heart fill:

home-smile fill:

home-wifi fill:

home fill:

hospital fill:

hotel fill:

store fill:

advertisement fill:

archive-drawer fill:

archive fill:

at fill:

attachment fill:

award fill:

bar-chart-2 fill:

bar-chart-box fill:

bar-chart-horizontal fill:

bar-chart fill:

bookmark-star fill:

bookmark fill:

briefcase fill:

bubble-chart fill:

calculator fill:

calendar-check fill:

calendar-date fill:

calendar-event fill:

calendar fill:

creative-commons-by fill:

creative-commons-nc fill:

creative-commons fill:

customer-service fill:

data-cloud-off fill:

data-cloud fill:

donut-chart fill:

flag fill:

global fill:

headset fill:

honour fill:

inbox-archive fill:

inbox-unarchive fill:

inbox fill:

line-chart fill:

links fill:

mail-add fill:

mail-check fill:

mail-close fill:

mail-download fill:

mail-forbid fill:

mail-lock fill:

mail-open fill:

mail-send fill:

mail-settings fill:

mail-star fill:

mail-unread fill:

mail-volume-line fill:

mail fill:

medal fill:

pie-chart fill:

printer fill:

profile fill:

projector fill:

record fill:

registered fill:

reply-all fill:

reply fill:

send-plane-inline fill:

send-plane fill:

slideshow-content-charts fill:

slideshow fill:

stack-layers fill:

window fill:

chat-dot fill:

chat-history fill:

chat-off fill:

chat-smile-3-line fill:

chat-smile fill:

chat fill:

message-chat-check fill:

message-chat-delete fill:

message-chat-feedback fill:

message-chat-heart fill:

message-chat-new fill:

message-chat-off fill:

message-chat-pool fill:

message-chat-question fill:

message-chat-typing-doted fill:

message-chat-video fill:

message-chat fill:

question-answer fill:

anticlockwise-right-up fill:

anticlockwise-up-down fill:

artboard-2 fill:

artboard fill:

ball-pen fill:

blur-off fill:

brush-2 fill:

brush fill:

clockwise-2 fill:

clockwise fill:

collage fill:

compasses-2 fill:

contrast-drop fill:

contrast-moon fill:

contrast fill:

crop-2 fill:

drag-drop fill:

drag-move-2 fill:

draggable-general fill:

draggable-horizontal-arrow fill:

draggable-horizontal fill:

draggable-vertical-arrow fill:

draggable-vertical fill:

drop fill:

edit-2 fill:

edit-box fill:

edit-circle fill:

eraser fill:

focus fill:

grid fill:

hammer fill:

ink-bottle fill:

input-method fill:

layout-2 fill:

layout-3 fill:

layout-4 fill:

layout-5 fill:

layout-6 fill:

layout-bottom-2 fill:

layout-bottom fill:

layout-column fill:

layout-grid fill:

layout-left-2 fill:

layout-left fill:

layout-masonry fill:

layout-right-2 fill:

layout-right fill:

layout-row fill:

layout-top-2 fill:

layout-top fill:

layout fill:

magic fill:

mark-pen fill:

markup fill:

paint-brush fill:

paint fill:

palette fill:

pen-nib fill:

pencil-ruler-2 fill:

pencil-ruler fill:

pencil fill:

quill-pen fill:

ruler-2 fill:

ruler fill:

scissors-cut fill:

scissors fill:

screenshot-2 fill:

shape-2 fill:

sip fill:

slice fill:

table-alt fill:

table fill:

target-focus-2 fill:

tools fill:

braces fill:

brackets fill:

bug fill:

code-box fill:

code-s-slash fill:

code-s fill:

command fill:

css3 fill:

cursor fill:

git-branch fill:

git-commit fill:

git-merge fill:

git-pull-request fill:

git-repository-commits fill:

git-repository-private fill:

git-repository fill:

html5 fill:

parentheses fill:

terminal-box fill:

terminal-window fill:

terminal fill:

airplay fill:

barcode fill:

base-station fill:

battery-charge fill:

battery-low fill:

battery fill:

bluetooth-connect fill:

cast fill:

cellphone fill:

computer fill:

cpu fill:

dashboard-2 fill:

dashboard-3 fill:

database-2 fill:

database fill:

device-recover fill:

device fill:

fingerprint-2 fill:

gamepad fill:

gps fill:

hotspot fill:

install fill:

keyboard-box fill:

macbook fill:

mouse fill:

phone fill:

qr-code fill:

qr-scan-2 fill:

radar fill:

remote-control-2 fill:

restart fill:

rotate-lock fill:

router fill:

rss fill:

save fill:

scan-2 fill:

sd-card fill:

server fill:

shut-down fill:

signal-wifi-1 fill:

signal-wifi-2 fill:

signal-wifi-3 fill:

signal-wifi-error fill:

signal-wifi-off fill:

signal-wifi fill:

smartphone fill:

tablet fill:

tv fill:

u-disk fill:

uninstall fill:

usb fill:

wifi-off fill:

wifi fill:

wireless-thunder-charging fill:

article fill:

bill fill:

book-2 fill:

book-mark fill:

book-open fill:

book-read fill:

booklet fill:

clipboard fill:

contacts-book-2 fill:

contacts-book-upload fill:

contacts-book fill:

draft fill:

eletronic-book fill:

file-3 fill:

file-add fill:

file-chart-2 fill:

file-chart fill:

file-cloud fill:

file-code fill:

file-copy-2 fill:

file-copy fill:

file-damage fill:

file-download fill:

file-edit fill:

file-excel-2 fill:

file-excel fill:

file-forbid fill:

file-gif fill:

file-history fill:

file-info fill:

file-list-text-indent fill:

file-list-text-justify fill:

file-lock fill:

file-mark fill:

file-music fill:

file-paper-2 fill:

file-pdf fill:

file-ppt fill:

file-reduce fill:

file-search fill:

file-settings fill:

file-shield-2 fill:

file-transfer fill:

file-unknow fill:

file-upload fill:

file-user fill:

file-warning fill:

file-word-2 fill:

file-zip fill:

folder-add fill:

folder-chart-2 fill:

folder-chart fill:

folder-download fill:

folder-forbid fill:

folder-history fill:

folder-info fill:

folder-keyhole fill:

folder-lock fill:

folder-music fill:

folder-open fill:

folder-reduce fill:

folder-settings fill:

folder-shield-2 fill:

folder-transfer fill:

folder-unknow fill:

folder-upload fill:

folder-user fill:

folder-warning fill:

folder-zip fill:

folder fill:

folders fill:

keynote fill:

markdown fill:

newspaper fill:

numbers fill:

pages fill:

sticky-note fill:

survey fill:

task fill:

todo fill:

align-bottom fill:

align-top fill:

align-vertically fill:

asterisk fill:

attachment-2 fill:

bold fill:

bring-forward fill:

bring-to-front fill:

code-view fill:

delete-column fill:

delete-row fill:

double-quotes-left fill:

double-quotes-right fill:

emphasis fill:

flow-chart fill:

font-color fill:

font-size-decrease fill:

font-size-increase fill:

font-size fill:

format-clear fill:

hashtag fill:

heading-h-1 fill:

heading-h-3 fill:

heading-h-4 fill:

heading-h-5 fill:

heading-h-6 fill:

indent-decrease fill:

indent-increase fill:

input-cursor-move fill:

input-cursor fill:

insert-column-left fill:

insert-column-right fill:

insert-row-bottom fill:

insert-row-top fill:

italic fill:

line-height fill:

list-check-2 fill:

list-check fill:

list-ordered fill:

list-unordered fill:

merge-cells-horizontal fill:

merge-cells-vertical fill:

mind-map fill:

node-tree fill:

number-0 fill:

number-1 fill:

number-3 fill:

number-4 fill:

number-5 fill:

number-6 fill:

number-7 fill:

number-9 fill:

organization-chart fill:

page-separator fill:

question-mark fill:

send-backward fill:

send-to-back fill:

separator fill:

single-quotes-left fill:

single-quotes-right fill:

sort-arrow fill:

sort-asc fill:

sort-desc fill:

split-cells-horizontal fill:

split-cells-vertical fill:

strikethrough-2 fill:

strikethrough fill:

subscript-2 fill:

superscript-2 fill:

table-2 fill:

text-align-justify fill:

text-align-left fill:

text-align-right fill:

text-direction-l fill:

text-direction-r fill:

text-spacing fill:

text-wrap fill:

text fill:

translate fill:

underline fill:

auction fill:

bank-card-2 fill:

bank-card fill:

bit-coin fill:

coin fill:

coins fill:

copper-coin fill:

copper-diamond fill:

coupon-2 fill:

currency fill:

exchange-box fill:

exchange-cny fill:

exchange-dollar fill:

exchange fill:

gift-2 fill:

hand-coin fill:

hand-heart fill:

hours-24 fill:

increase-decrease fill:

money-cny-circle fill:

money-dollar-circle fill:

money-euro-circle fill:

money-pound-circle fill:

percent fill:

price-tag-2 fill:

price-tag-3 fill:

refund fill:

safe-2 fill:

safe fill:

secure-payment fill:

shopping-bag fill:

shopping-cart fill:

swap fill:

trophy fill:

vip-crown-2 fill:

vip-diamond fill:

vip fill:

wallet fill:

water-flash fill:

capsule fill:

dislike fill:

dossier fill:

empathize fill:

first-aid-kit fill:

flask fill:

hand-sanitizer fill:

health-book fill:

heart-add fill:

heart-pulse fill:

heart fill:

hearts fill:

lungs fill:

medicine-bottle fill:

mental-health fill:

microscope fill:

nurse fill:

psychotherapy fill:

pulse fill:

rest-time fill:

stethoscope fill:

surgical-mask fill:

syringe fill:

test-tube fill:

thermometer fill:

virus fill:

zzz fill:

alipay fill:

amazon fill:

android fill:

angularjs fill:

app-store fill:

apple fill:

baidu fill:

behance fill:

bilibili fill:

centos fill:

chrome fill:

codepen fill:

coreos fill:

coruja-educacional fill:

dingding fill:

discord fill:

disqus fill:

douban fill:

dribbble fill:

drive fill:

dropbox fill:

edge fill:

evernote fill:

facebook-box fill:

facebook-circle fill:

facebook fill:

finder fill:

firefox fill:

flutter fill:

gatsby fill:

github fill:

gitlab fill:

google-play fill:

google fill:

honor-of-kings fill:

ie fill:

instagram fill:

invision fill:

kakao-talk fill:

line fill:

linkedin-box fill:

linkedin fill:

mastercard fill:

mastodon fill:

medium fill:

messenger fill:

microsoft fill:

mini-program fill:

netease-cloud-music fill:

netflix fill:

nintendo-switch fill:

npmjs fill:

open-source fill:

opera fill:

patreon fill:

paypal fill:

pinterest fill:

pixelfed fill:

playstation fill:

product-hunt fill:

qq fill:

reactjs fill:

reddit fill:

remixicon fill:

safari fill:

skype fill:

slack fill:

snapchat fill:

soundcloud fill:

spectrum fill:

spotify fill:

stack-overflow fill:

stackshare fill:

steam fill:

taobao fill:

telegram fill:

trello fill:

tumblr fill:

twitch fill:

twitter fill:

ubuntu fill:

unsplash fill:

vimeo fill:

visa fill:

vuejs fill:

wechat-2 fill:

wechat-pay fill:

wechat fill:

weibo fill:

whatsapp fill:

windows fill:

xbox fill:

xing fill:

youtube fill:

zcool fill:

zhihu fill:

anchor fill:

barricade fill:

bike fill:

bus fill:

car fill:

charging-pile-2 fill:

china-railway fill:

compass-3 fill:

compass-discover fill:

cup fill:

direction fill:

earth fill:

footprint fill:

gas-station fill:

globe fill:

guide fill:

hotel-bed fill:

lifebuoy fill:

luggage-deposit fill:

map-2 fill:

map-pin-2 fill:

map-pin-add fill:

map-pin-user fill:

motorbike fill:

navigation fill:

parking-box fill:

passport fill:

pin-distance fill:

plane fill:

police-car fill:

pushpin fill:

restaurant-2 fill:

riding fill:

road-map fill:

rocket-2 fill:

route fill:

run fill:

ship fill:

signal-tower fill:

suitcase-trip fill:

suitcase fill:

taxi fill:

traffic-light fill:

train fill:

treasure-map fill:

truck fill:

walk fill:

album fill:

aspect-ratio fill:

broadcast fill:

cam-video-upload fill:

cam-video fill:

cam-videovideo-add fill:

cam-videovideo-download fill:

camera-off fill:

camera-switch fill:

camera fill:

clapperboard fill:

closed-captioning fill:

disc fill:

energy-thunder-circle fill:

equalizer fill:

expand fill:

film fill:

fullscreen-exit fill:

fullscreen fill:

gallery-upload fill:

gallery fill:

hd fill:

headphone fill:

image-add fill:

image-edit fill:

image fill:

landscape fill:

live-cam-video fill:

mic-off fill:

mic fill:

movie-2 fill:

movie-video-play fill:

music-2 fill:

notification-4 fill:

notification-off fill:

order-play fill:

pause-circle fill:

pause-mini fill:

picture-in-picture-2 fill:

picture-in-picture-exit fill:

picture-in-picture fill:

play-circle fill:

play-list-2 fill:

play-list-add fill:

play-list-check fill:

play-list fill:

play fill:

radio fill:

record-circle fill:

repeat-2 fill:

repeat-one fill:

resolution-4k fill:

rewind fill:

shuffle fill:

skip-back fill:

skip-forward fill:

sound-module fill:

sound-waves-rhythm fill:

speaker-2 fill:

speaker-3 fill:

speaker fill:

speed fill:

stop-circle fill:

stop fill:

surround-sound fill:

tape fill:

voiceprint fill:

volume-down fill:

volume-mute fill:

volume-up fill:

webcam fill:

accessibility-wheelchair fill:

cake-2 fill:

cake-3 fill:

character-recognition fill:

door-closed fill:

door-lock fill:

door-open fill:

education-graduation fill:

handbag fill:

key-2 fill:

leaf fill:

lightbulb-flash fill:

lightbulb fill:

plug fill:

recycle fill:

scales-balance-2 fill:

shirt fill:

t-shirt-2 fill:

umbrella fill:

voice-recognition fill:

add-box fill:

add-circle fill:

add fill:

alarm-warning fill:

alert fill:

apps-2 fill:

arrow-down-chevron fill:

arrow-down-circle fill:

arrow-down fill:

arrow-drop-down fill:

arrow-drop-left fill:

arrow-drop-right fill:

arrow-drop-up fill:

arrow-go-back fill:

arrow-go-forward fill:

arrow-left-chevron fill:

arrow-left-circle fill:

arrow-left-down fill:

arrow-left-right fill:

arrow-left-up fill:

arrow-left fill:

arrow-right-chevron fill:

arrow-right-circle fill:

arrow-right-down fill:

arrow-right-up fill:

arrow-right fill:

arrow-up-chevron fill:

arrow-up-circle fill:

arrow-up-down fill:

arrow-up fill:

back-time-10 fill:

back-time-15 fill:

back-time-30 fill:

back-time-5 fill:

back-time fill:

check-box-circle fill:

check-box-radio-blank-circle fill:

check-double fill:

check fill:

checkbox-blank fill:

checkbox-indeterminate fill:

checkbox-multiple-blank fill:

checkbox-multiple fill:

checkbox fill:

clock-timer-flash fill:

clock-timer fill:

close-circle fill:

close fill:

dashboard fill:

delete-back-2 fill:

delete-back fill:

delete-bin-7 fill:

delete-bin fill:

divide fill:

download-cloud fill:

download fill:

error-warning fill:

external-link fill:

eye-off fill:

eye fill:

filter-3 fill:

filter-off fill:

filter fill:

find-replace fill:

forbid-2 fill:

forbid fill:

forward-time-10 fill:

forward-time-15 fill:

forward-time-30 fill:

forward-time-5 fill:

forward-time fill:

function fill:

history fill:

hour-time fill:

indeterminate-circle fill:

information fill:

kebab-menu fill:

list-settings fill:

loader-2 fill:

lock-password fill:

lock-unlock fill:

lock fill:

logout-box fill:

meatballs-menu fill:

menu-2 fill:

menu-3 fill:

menu-4 fill:

menu-5 fill:

menu-add fill:

menu-fold fill:

menu-unfold fill:

menu fill:

notification-badge fill:

question-circle fill:

radio-button fill:

refresh fill:

search fill:

settings-4 fill:

share-forward fill:

share fill:

shield-check fill:

shield-cross fill:

shield-flash fill:

shield-keyhole fill:

shield-star fill:

shield fill:

side-bar fill:

spam-2 fill:

spam-3 fill:

spam fill:

star-half fill:

star fill:

subtract fill:

thumb-down-dislike fill:

thumb-up-like fill:

toggle fill:

upload-2 fill:

upload-cloud fill:

zoom-in fill:

zoom-out fill:

account-box fill:

account-circle fill:

account-pin-box fill:

account-pin-circle fill:

admin fill:

contacts fill:

emotion-happy fill:

emotion-laugh fill:

emotion-normal fill:

emotion-sad fill:

emotion-unhappy fill:

emotion fill:

gender-less fill:

gender-men fill:

gender-travesti fill:

gender-women fill:

group fill:

parent fill:

star-smile fill:

team fill:

user-add fill:

user-follow fill:

user-heart fill:

user-location fill:

user-received-2 fill:

user-search fill:

user-settings fill:

user-shared-2 fill:

user-star fill:

user-unfollow fill:

user-voice fill:

user fill:

blaze fill:

celsius fill:

cloud-windy fill:

cloudy fill:

earthquake fill:

fahrenheit fill:

fire fill:

flashlight-thunder fill:

flood fill:

foggy fill:

hail fill:

haze fill:

meteor fill:

mist fill:

moon-clear fill:

moon-cloudy fill:

moon-foggy fill:

moon fill:

rainbow fill:

rainy fill:

showers fill:

snowy fill:

sun-cloudy fill:

sun-foggy fill:

sun fill:

temp-cold fill:

thunderstorms fill:

tornado fill:

typhoon fill:

windy fill:

creative-commons-nd fill:

pantone fill:

t-box fill:

font-size-2 fill:

heading-h-2 fill:

heading fill:

link fill:

number-2 fill:

number-8 fill:

paragraph fill:

subscript fill:

superscript fill:

text-align-center fill:

unlink fill:

exchange-funds fill:

funds fill:

red-packet fill:

refund-2 fill:

shopping-basket fill:

stock fill:

swap-box fill:

formula-fx fill:

24-hours fill:

formula-FX fill:

switch fill:

4k fill:

Component 1 fill:

mail-volume fill:

empty-icon fill:

placeholder-icon2 fill:

Nome	Tipo	Default	Descrição
name*	`string`	`coruja-educacional-fill`	Definirá o ícone que será utilizado.
size	`string \| number`	`medium`	Tamanho do ícone, pode ser usado uma string padrão `small`, `medium` e `large` ou um tamanho da sua preferência do tipo float em pixels. Ele será convertido automaticamente para `rem` no fim.
color	`string`	`var(--c-color-primary)`	Permite customizar a cor do ícone, aceita qualquer string válida de cor CSS.
ariaHidden	`boolean`	`true`	Define se o ícone estará escondido para leitores de tela.
reverseHover	`boolean`	`false`	Permite que o ícone automaticamente inverta de outline para fill e vice versa no hover.