Links
💡

Iconos

Claro que tenemos iconos, pero recuerda usarlos solamente cuando exista una necesidad clara de ellos en nuestras interfaces. Los iconos han de tener un intención y un significado claro.

Uso

Si ya tienes decidido el uso de nuestros iconos, perfecto. Pero déjanos recordarte en que usos pensamos para ellos
  • Decorativos. Pueden ser incluidos para hacer el contenido visual más atractivo. En este caso no se añade información al contenido.
  • Informativos. Suelen transmitir un concepto simple que puede ser expresada en una frase corta. Por ejemplo el icono de un teléfono al lado de un número de teléfono.
  • Funcional o interactivos Son invitaciones a la acción y son usados en elementos como enlaces, botones u otros elementos interactivos.

Consumible en Figma

El equipo de diseño puede consumir los iconos de PluralDS desde una librería en Figma versionada.

Usamos Keyicons

https://keyicons.com/
Como base usamos un set de iconos free. Se trata de Keyicons, un desarrollo gratuito de iconos que están muy limpios y bien clasificados, dicho esto nosotros también hemos hecho algo de trabajo y muchos iconos nuevos. Los iconos están distribuidos en una librería de Figma que tiene marcados los siguientes tamaños y categorías...
Tamaño: XS = 16px, S = 24px, M = 32px, L = 40px, XL = 56px

Smart Stroke

Todos los iconos están ajustados dentro de una "icon line smart stroke". Estas líneas que soportan la estructura y proporción de nuestros iconos ayudan también en el redimensionamiento de los iconos. En esta imagen puedes ver el armazon horizontal, vertical, cuadado y esférico que soportan cada uno de los iconos incluidos en PluralDS.

Tageado de iconos

Todos los iconos además de un Title (nombre) tienen asociados un conjunto de tags que ayudan en su consumo por parte de los diseñadores. No hace falta que conozcas el Title (nombre) específico para encontrarlo dentro de tu herramienta de diseño (figma). En el buscador de assets puedes buscar conceptos asociados al icono que quieres encontrar y tienes altas posibilidades de poder acertar. Estos tags están disponibles tanto en castellano como en inglés.
Idioma
Conceptos
Tags castellano
añadir, agregar, incorporar, acrecentar, adicionar, ampliar, anexionar, aumentar, incrementar, integrar, sumar,
Tags inglés
calculate, count, enumerate, summate, sum, inclusion, adding, adjoinin

Acciones

Ico
Title
Token Name
add
--icon-add
add-circle
--add-circle
adjustment
--adjustment
bookmark
--bookmark
check
--check
check-circle
--check-circle
close
--close
close-circle
--close-circle
copy
--copy
download-1
--download-1
download-2
--download-2
download-3
--download-3
eye
--eye
heart
--heart
join
--join
leave
--leave
link
--link
link-external
--link-external
lock
--lock
maximize
--maximize
minimize
--minimize
paper-clip
--paper-clip
save
--save
search
--search
send
--send
setting
--setting
star
--star
transfer
--transfer
trash
--trash
unlock
--unlock
upload-1
--upload-1
upload-2
--upload-2
upload-3
--upload-3
zoom-in
--zoom-in
zoom-out
-zoom-out

Alertas

Ico
Title
Token Name
alert
--alert
blocked
--blocked
bell
--bell
info
--info
help
--help

Comunicación

Ico
Title
Token Name
call-during
--call-during
call-incoming
--call-incoming
call-missed
--call-missed
call-off
--call-off
call-outgoing
--call-outgoing
code
--code
mail
--mail
map-pin
--map-pin
message-bubble
--message-bubble
message
--message
phone
--phone
share
--share
wifi
--wifi

Contenido

Ico
Title
Token Name
activity
--activity
analytics
--analytics
award
--award
bar-chart-1
--bar-chart-1
bar-chart-2
--bar-chart-2
book
--book
calendar
--calendar
clock
--clock
coffee
--coffee
credit-card
--credit-card
file-audio
--file-audio
file-code
--file-code
file-generic
--file-generic
file-jpg
--file-jpg
file-new
--file-new
file-png
--file-png
file-svg
--file-svg
file-video
--file-video
filter
--filter
flag
--flag
folder-minus
--folder-minus
folder-plus
--folder-plus
folder
--folder
gift
--gift
globe
--globe
grid
--grid
home
--home
layers
--layers
map
--map
money
--money
moon
--moon
navigation
--navigation
percentage
--percentage
pie-chart
--pie-chart
sad-face
--sad-face
shop
--shop
shoping-bag-2
--shoping-bag-2
shoping-bag-3
--shoping-bag-3
shoping-bag
--shoping-bag
shoping-cart
--shoping-cart
smiley-face
--smiley-face
tag
--tag
tags
--tags
target
--target
trending-down
--trending-down
user-x
--user-x
user
--user
users
--users

Editor

Ico
Title
Token Name
align-center
--align-center
align-justify
--align-justify
align-left
--align-left
align-right
--align-right
bullet-list
--bullet-list
edit
--edit
font-color
--font-color
list-numbered
--list-numbered
list
--list
pen-tool
--pen-tool
scissors
--scissors
text-bold
--text-bold
text-italic
--text-italic
text-strikethrough
--text-strikethrough
text-underline
--text-underline

Key

Ico
Title
Token Name
chrome
--chrome
codepen
--codepen
facebook
--facebook
figma
--figma
gem
--gem
gitlab
--gitlab
instagram
--instagram
keyicons
--keyicons
linkedin
--linkedin
party
--party
premio
--premio
sketch
--sketch
trello
--trello
twitch
--twitch
twitter
--twitter
youtube
--youtube

Multimedia

camera
--camera
cpu
--cpu
database
--database
desktop
--desktop
equalizer
--equalizer
fast-forwar
--fast-forwar
headphones
--headphones
image
--image
lightning-bolt
--lightning-bolt
mic
--mic
mobile
--mobile
music
--music
next
--next
pause
--pause
play
--play
playlist
--playlist
previous
--previous
printer
--printer
reload
--reload
repeat-play
--repeat-play
rewind
--rewind
rotate-left
--rotate-left
shuffle-play
--shuffle-play
sound
--sound
stop
--stop
streaming
--streaming
tv
--tv
video-off
--video-off
video
--video
volume-minus
--volume-minus
volume-off
--volume-off
volume-plus
--volume-plus
Ico
Title
Token Name
arrow-down
--arrow-down
arrow-left
--arrow-left
arrow-right
--arrow-right
arrow-up
--arrow-up
chevron-down
--chevron-down
chevron-left
--chevron-left
chevron-right
--chevron-right
chevron-up
--chevron-up