Skip to content
plural
Plural DS
Plural DS
Opciones

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

⁠
image.png
⁠
⁠
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.
⁠
icon line smart stroke.png
⁠
⁠

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.
⁠
icon-tag.png
⁠
⁠

Idioma
Conceptos
1
Tags castellano
añadir, agregar, incorporar, acrecentar, adicionar, ampliar, anexionar, aumentar, incrementar, integrar, sumar,
2
Tags inglés
calculate, count, enumerate, summate, sum, inclusion, adding, adjoinin
There are no rows in this table
⁠

Librería de iconos

Acciones
Ico
Title
Token Name
1
add.svg
add
–icon-add
2
add-circle.svg
add-circle
–add-circle
3
adjustment.svg
adjustment
–adjustment
4
bookmark.svg
bookmark
–bookmark
5
check.svg
check
–check
6
check-circle.svg
check circle
–check-circle
7
close.svg
close
–close
8
close-circle.svg
close circle
–close-circle
9
copy.svg
copy
–copy
10
download-1.svg
download 1
–download-1
11
download-2.svg
download 2
–download-2
12
download-3.svg
download 3
–download-3
13
eye.svg
eye
–eye
14
heart.svg
heart
–heart
15
hamburguer.svg
hamburger
-hamburger
16
join.svg
join
–join
17
leave.svg
leave
–leave
18
link.svg
link
–link
19
link-external.svg
link external
–link-external
20
lock.svg
lock
–lock
21
maximize.svg
maximize
–maximize
22
minimize.svg
minimize
–minimize
23
paper-clip.svg
paper clip
–paper-clip
24
save.svg
save
–save
25
search.svg
search
–search
26
send.svg
send
–send
27
settings.svg
settings
–setting
28
star.svg
star
–star
29
subtract.svg
subtract
​
30
transfer.svg
transfer
–transfer
31
trash.svg
trash
–trash
32
unlock.svg
unlock
–unlock
33
upload-1.svg
upload-1
–upload-1
34
upload-2.svg
upload-2
–upload-2
35
upload-3.svg
upload-3
–upload-3
36
zoom-in.svg
zoom-in
–zoom-in
37
zoom-out.svg
zoom-out
-zoom-out
There are no rows in this table
⁠
Alertas
Ico
Title
Token Name
1
alert.svg
alert
–alert
2
blocked.svg
blocked
–blocked
3
bell.svg
bell
–bell
4
info.svg
info
–info
5
help.svg
help
–help
There are no rows in this table
⁠
Comunicación
Ico
Title
Token Name
1
call-during.svg
call-during
–call-during
2
call-incoming.svg
call-incoming
–call-incoming
3
call-missed.svg
call-missed
–call-missed
4
call-off.svg
call-off
–call-off
5
call-outgoing.svg
call-outgoing
–call-outgoing
6
code.svg
code
–code
7
mail.svg
mail
–mail
8
map-pin.svg
map-pin
–map-pin
9
message-bubble.svg
message-bubble
–message-bubble
10
message.svg
message
–message
11
phone.svg
phone
–phone
12
share.svg
share
–share
13
wifi.svg
wifi
–wifi
There are no rows in this table
⁠
Contenido
Ico
Title
Token Name
1
activity.svg
activity
–activity
2
analytics.svg
analytics
–analytics
3
award.svg
award
–award
4
bar-chart-1.svg
bar-chart-1
–bar-chart-1
5
bar-chart-2.svg
bar-chart-2
–bar-chart-2
6
book.svg
book
–book
7
calendar.svg
calendar
–calendar
8
clock.svg
clock
–clock
9
coffee.svg
coffee
–coffee
10
credit-card.svg
credit-card
–credit-card
11
file-audio.svg
file-audio
–file-audio
12
file-code.svg
file-code
–file-code
13
file-generic.svg
file-generic
–file-generic
14
file-jpg.svg
file-jpg
–file-jpg
15
file-new.svg
file-new
–file-new
16
file-png.svg
file-png
–file-png
17
file-svg.svg
file-svg
–file-svg
18
file-video.svg
file-video
–file-video
19
filter.svg
filter
–filter
20
flag.svg
flag
–flag
21
folder-minus.svg
folder-minus
–folder-minus
22
folder-plus.svg
folder-plus
–folder-plus
23
folder.svg
folder
–folder
24
gift.svg
gift
–gift
25
globe.svg
globe
–globe
26
grid.svg
grid
–grid
27
home.svg
home
–home
28
layers.svg
layers
–layers
29
map.svg
map
–map
30
money.svg
money
–money
31
moon.svg
moon
–moon
32
navigation.svg
navigation
–navigation
33
percentage.svg
percentage
–percentage
34
pie-chart.svg
pie-chart
–pie-chart
35
sad-face.svg
sad-face
–sad-face
36
shop.svg
shop
–shop
37
shoping-bag-2.svg
shoping-bag-2
–shoping-bag-2
38
shoping-bag-3.svg
shoping-bag-3
–shoping-bag-3
39
shoping-bag.svg
shoping-bag
–shoping-bag
40
shoping-cart.svg
shoping-cart
–shoping-cart
41
smiley-face.svg
smiley-face
–smiley-face
42
tag.svg
tag
–tag
43
tags.svg
tags
–tags
44
target.svg
target
–target
45
trending-down.svg
trending-down
–trending-down
46
user-x.svg
user-x
–user-x
47
user.svg
user
–user
48
users.svg
users
–users
There are no rows in this table
⁠
Editor
Ico
Title
Token Name
1
align-center.svg
align-center
–align-center
2
align-justify.svg
align-justify
–align-justify
3
align-left.svg
align-left
–align-left
4
align-right.svg
align-right
–align-right
5
bullet-list.svg
bullet-list
–bullet-list
6
edit.svg
edit
–edit
7
font-color.svg
font-color
–font-color
8
list-numbered.svg
list-numbered
–list-numbered
9
list.svg
list
–list
10
pen-tool.svg
pen-tool
–pen-tool
11
scissors.svg
scissors
–scissors
12
text-bold.svg
text-bold
–text-bold
13
text-italic.svg
text-italic
–text-italic
14
text-strikethrough.svg
text-strikethrough
–text-strikethrough
15
text-underline.svg
text-underline
–text-underline
There are no rows in this table
⁠
Key
Ico
Title
Token Name
1
chrome.svg
chrome
–chrome
2
codepen.svg
codepen
–codepen
3
facebook.svg
facebook
–facebook
4
figma.svg
figma
–figma
5
gem.svg
gem
–gem
6
gitlab.svg
gitlab
–gitlab
7
instagram.svg
instagram
–instagram
8
keyicons.svg
keyicons
–keyicons
9
linkedin.svg
linkedin
–linkedin
10
party.svg
party
–party
11
premio.svg
premio
–premio
12
sketch.svg
sketch
–sketch
13
trello.svg
trello
–trello
14
twitch.svg
twitch
–twitch
15
twitter.svg
twitter
–twitter
16
youtube.svg
youtube
–youtube
There are no rows in this table
⁠
Multimedia
Ico
Title
Token name
1
camera.svg
camera
–camera
2
cpu.svg
cpu
–cpu
3
database.svg
database
–database
4
desktop.svg
desktop
–desktop
5
equalizer.svg
equalizer
–equalizer
6
fast-forward.svg
fast-forwar
–fast-forwar
7
headphones.svg
headphones
–headphones
8
image.svg
image
–image
9
lightning-bolt.svg
lightning-bolt
–lightning-bolt
10
mic.svg
mic
–mic
11
mobile.svg
mobile
–mobile
12
music.svg
music
–music
13
next.svg
next
–next
14
pause.svg
pause
–pause
15
play.svg
play
–play
16
playlist.svg
playlist
–playlist
17
previous.svg
previous
–previous
18
printer.svg
printer
–printer
19
reload.svg
reload
–reload
20
repeat-play.svg
repeat-play
–repeat-play
21
rewind.svg
rewind
–rewind
22
rotate-left.svg
rotate-left
–rotate-left
23
shuffle-play.svg
shuffle-play
–shuffle-play
24
sound.svg
sound
–sound
25
stop.svg
stop
–stop
26
streaming.svg
streaming
–streaming
27
tv.svg
tv
–tv
28
video-off.svg
video-off
–video-off
29
video.svg
video
–video
30
volume-minus.svg
volume-minus
–volume-minus
31
volume-off.svg
volume-off
–volume-off
32
volume-plus.svg
volume-plus
–volume-plus
There are no rows in this table
⁠
Navigation
Ico
Title
Token Name
1
arrow-down.svg
arrow-down
–arrow-down
2
arrow-left.svg
arrow-left
–arrow-left
3
arrow-right.svg
arrow-right
–arrow-right
4
arrow-up.svg
arrow-up
–arrow-up
5
chevron-down.svg
chevron-down
–chevron-down
6
chevron-left.svg
chevron-left
–chevron-left
7
chevron-right.svg
chevron-right
–chevron-right
8
chevron-up.svg
chevron-up
–chevron-up
There are no rows in this table
⁠
Uso
Consumible en Figma
Usamos Keyicons
Smart Stroke
Tageado de iconos
Librería de iconos
Acciones
Alertas
Comunicación
Contenido
Editor
Key
Multimedia
Navigation
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.