Iconografia
A iconografia que utilizamos no Cuida simplifica a interação do usuário com o sistema, pois possibilita que elementos sejam mais facilmente identificados. Além disso, permite que os usuários compreendam com mais facilidade os componentes do layout, reduzindo a curva de aprendizado sobre a interface.
Recomendações
Para melhor representar ícones do sistema, recomendamos que sejam utilizados ícones com tamanho entre 20 x 20 e 24 x 24 pixels.
Para melhor compreensão por parte do usuário, utilize ícones já comumente adotados para a função desejada. Por exemplo, um sino para notificações, uma engrenagem para configurações, etc.
Para tornar o conteúdo mais claro, utilize ícones em conjunto com texto, sempre que possível.
Ícones
O Cuida implementa um wrapper em forma de componente dos ícones do CuidaIcons. Qualquer manutenção ou melhoria deve ser feita no projeto respectivo e no design kit no Figma e, caso necessário, atualizada aqui.
<CdsIcon
name="box-outline"
height="40"
width="40"
color="#36424E"
/>Actions
plus-outline
minus-outline
x-outline
plus-circle-outline
minus-circle-outline
x-circle-outline
block-outline
power-outline
printer-outline
bookmark-outline
trash-outline
search-outline
upload-outline
download-outline
edit-outline
copy-outline
tag-outline
bullseye-outline
scope-outline
lifebuoy-outline
trophy-outline
loop-outline
Files & documents
document-outline
document-text-outline
document-texts-outline
clipboard-outline
clipboard-text-outline
folder-outline
folder-open-outline
briefcase-outline
layers-outline
subtask-outline
box-outline
package-outline
attachment-clip-outline
link-outline
upload-cloud-outline
download-cloud-outline
Type & content
heading-1-outline
heading-2-outline
heading-3-outline
text-outline
divider-outline
number-outline
long-text-outline
short-text-outline
at-outline
hashtag-outline
bullet-list-outline
paragraph-outline
Notifications
notification-bell-outline
notification-bell-timer-outline
alert-outline
check-circle-outline
check-outline
info-outline
help-outline
warning-outline
mail-outline
checkbox-checked-outlined
checkbox-unchecked-outlined
single-select-outline
flag-outline
sparks-outline
lamp-outline
lamp-on-outline
Menu & navigation
home-outline
dashboard-outline
grid-outline
list-outline
filter-outline
more-horizontal-outline
more-vertical-outline
reorder-outline
sidebar-expand-outline
sidebar-collapse-outline
Arrows
arrow-up-circle-outline
arrow-down-circle-outline
arrow-right-circle-outline
arrow-left-circle-outline
caret-up-outline
caret-down-outline
caret-right-outline
caret-left-outline
open-in-new-tab-outline
logout-outline
login-outline
rotate-left-outline
rotate-right-outline
loading-right-outline
loading-left-outline
refresh-outline
arrow-left-outline
arrow-up-outline
arrow-right-outline
arrow-down-outline
swap-horizontal-arrows-outline
swap-vertical-arrows-outline
sort-ascending-duotone
sort-descending-duotone
expand-outline
minimize-outline
move-outline
undo-outline
rendo-outline
shuffle-outline
unfold-vertical-outline
unfold-horizontal-outline
shrink-outline
maximize-outline
dropdown-outline
Multimedia
translate-outline
play-outline
pause-outline
play-circle-outline
pause-circle-outline
stop-circle-outline
image-outline
videocam-outline
bolt-outline
open-book-outline
mouse-outline
monitor-outline
tv-outline
totem-outline
volume-1-outline
volume-2-outline
phone-outline
headphone-outline
headset-outline
Users
user-outline
user-remove-outline
user-add-outline
users-outline
Charts
trending-up-outline
trending-down-outline
pie-chart-outline
chart-column-outline
Settings
settings-outline
funnel-outline
sliders-outline
Location
map-pin-outline
map-outline
pin-outline
pin-fill
bed-outiline
building-outline
ticket-outline
moon-outline
sun-outline
Date & time
calendar-clear-outline
calendar-outline
clock-outline
history-outline
Security
visibility-on-outline
visibility-off-outline
lock-outline
unlock-outline
key-outline
shield-outline
shield-tick-outline
shield-alert-outline
radar-outline
Social
chatbubble-outline
chatbubbles-outline
trophy-outline
weight-outline
fire-outline
star-outline
Brands
github-logo-outline
gitlab-logo-outline
figma-logo-outline
framer-logo-outline
Health
medicine-outline
test-tube-outline
syringe-outline
tube-outline
sample-container-outline
stethoscope-outline
heart-rate-outline
ambulance-outline