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