💡
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.
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.
El equipo de diseño puede consumir los iconos de PluralDS desde una librería en Figma versionada.
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 = 56pxTodos 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.
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 |
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 |
Ico | Title | Token Name |
|---|---|---|
 | alert | --alert |
 | blocked | --blocked |
 | bell | --bell |
 | info | --info |
 | help | --help |
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 |
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 |
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 |
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 |
 | 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 |
Última actualización 1yr ago