DSO Toolkit homepage

Icon (Web Component)

Component preview opent in nieuw tabblad

Iconen moeten betekenis geven aan een grafische gebruikersinterface. Iconen zijn een visuele presentatie van een object, idee of actie. Als dat object, idee of die actie niet direct duidelijk is voor de gebruiker heeft het icoon ook weinig toegevoegde waarde en kan zelfs leiden tot verwarring en frustratie wat de gebruiker hindert bij het uitvoeren van een taak. Het herkennen en begrijpen van een icoon is afhankelijk van een eerdere ervaring van de gebruiker. Iconen kunnen gebruikers helpen taken te herkennen en onthouden. Doordat een standaard gebruik van iconen ontbreekt zijn labels nodig om de betekenis van een icoon te verduidelijken.

Technische Opmerkingen

  • Een namespace attribuut is niet nodig als het icoon in een HTML5 applicatie wordt gebruikt (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg).
  • In het use element mag direct href ipv xlink:href worden gebruikt. In SVG2 is xlink:href deprecated (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href).
  • In bovenstaand voorbeeld verwijs ik naar dso-icons.svg:
    • Als de toolkit scss files worden gecompileerd, moet de implementatie zorg dragen dat uiteindelijk node_modules/dso-toolkit/dist/library/dso-icons.svg wordt gebundled;
    • Als de toolkit via de CDN wordt gebruikt werken SVG iconen direct;
    • Als de toolkit de CSS uit de NPM package gebruikt moeten de bundlers/loaders rekening houden dat de SVG files worden meegenomen in de build;

De voordelen van goed ontworpen iconen

  • Een icoon is een goed ‘mikpunt’: ze zijn groot genoeg om makkelijk aan te tikken in een gebruikersinterface waarbij je je vinger nodig hebt om te navigeren, maar ze werken ook goed met een muis cursor;
  • Ze besparen ruimte: omdat ze compact zijn kunnen meerdere iconen in een relatief smalle ruimte;
  • Snelle herkenning: een bekend of makkelijk te herkennen icoon zal sneller een betekenis verduidelijken, soms sneller dan een tekstlink;
  • Vindbaarheid: als men leert welke actie geassocieerd is met een bepaald icoon zal de aanwezigheid van het icoon voor sommige gebruikers de mogelijkheid bieden om sneller en efficienter te werken bij herhalende taken;
  • Iconen zijn visueel aantrekkelijk: ze kunnen meerwaarde toevoegen aan een design en het beeld esthetisch aantrekkelijker maken.

Hoe te gebruiken: formaten en afmetingen

Iconen verdelen we onder in illustratieve iconen en gebruikersinterface iconen. Iconen worden aangeleverd in SVG formaat zodat het moeiteloos kan schalen op diverse schermbreedtes en altijd haarscherp blijft.

Gebruikersinterface iconen

  • Pixelformaat: 24x24
  • Format: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
  • Kleurgebruik: wordt aangeleverd in zwart, kleur kan bepaald worden via CSS

Aanvragen nieuwe iconen

Zijn de iconen in de dso-toolkit niet toereikend? Is er een specifieke icoon nodig die essentieel is voor de user-interface? Een icoon kun je op de volgende manier aanvragen. Ga naar de github repository van de dso-toolkit. Maak hier een nieuw issue aan en geef de volgende informatie mee:

  • Welke icoon of iconen je nodig hebt
  • Binnen welke tijdsspanne je de iconen nodig hebt
  • Email-adres indien een designer contact wil opnemen

Er is een icoon beschikbaar die als tijdelijke vervanging kan dienen. Deze heet wip-wip (work in progress) dit icoon is terug te vinden in de iconenlijst.

Bronvermelding

  1. air
  2. angle-down
  3. angle-left
  4. angle-right
  5. angle-up
  6. balloon
  7. bars
  8. buildings
  9. calendar
  10. caret-down
  11. check
  12. chevron-down
  13. chevron-left
  14. chevron-right
  15. chevron-up
  16. circle-notch
  17. clock
  18. copy
  19. crown
  20. cultural
  21. download
  22. email
  23. exclamation
  24. external-link
  25. eye-slash
  26. eye
  27. filter
  28. forbidden
  29. house
  30. info-active
  31. info-i
  32. info
  33. infrastructure
  34. label
  35. landscape
  36. layers
  37. location-outline
  38. location
  39. lock
  40. magnet
  41. map-location
  42. marker
  43. measurement
  44. minus-square
  45. minus
  46. more
  47. municipality
  48. nature
  49. new-window
  50. paperclip
  51. parking
  52. pencil
  53. pin-outline
  54. pin
  55. plus-square
  56. plus
  57. print
  58. redo
  59. scale
  60. search
  61. sitemap
  62. soil
  63. sort-ascending
  64. sort-descending
  65. sort
  66. status-danger
  67. status-info
  68. status-success
  69. status-warning
  70. table
  71. times
  72. trash
  73. undo
  74. user-line
  75. user
  76. users
  77. water
  78. wip-wip 
<!-- Air -->
<dso-icon icon="air"></dso-icon>
<!-- Angle Down -->
<dso-icon icon="angle-down"></dso-icon>
<!-- Angle Left -->
<dso-icon icon="angle-left"></dso-icon>
<!-- Angle Right -->
<dso-icon icon="angle-right"></dso-icon>
<!-- Angle Up -->
<dso-icon icon="angle-up"></dso-icon>
<!-- Balloon -->
<dso-icon icon="balloon"></dso-icon>
<!-- Bars -->
<dso-icon icon="bars"></dso-icon>
<!-- Buildings -->
<dso-icon icon="buildings"></dso-icon>
<!-- Calendar -->
<dso-icon icon="calendar"></dso-icon>
<!-- Caret Down -->
<dso-icon icon="caret-down"></dso-icon>
<!-- Check -->
<dso-icon icon="check"></dso-icon>
<!-- Chevron Down -->
<dso-icon icon="chevron-down"></dso-icon>
<!-- Chevron Left -->
<dso-icon icon="chevron-left"></dso-icon>
<!-- Chevron Right -->
<dso-icon icon="chevron-right"></dso-icon>
<!-- Chevron Up -->
<dso-icon icon="chevron-up"></dso-icon>
<!-- Circle Notch -->
<dso-icon icon="circle-notch"></dso-icon>
<!-- Clock -->
<dso-icon icon="clock"></dso-icon>
<!-- Copy -->
<dso-icon icon="copy"></dso-icon>
<!-- Crown -->
<dso-icon icon="crown"></dso-icon>
<!-- Cultural -->
<dso-icon icon="cultural"></dso-icon>
<!-- Download -->
<dso-icon icon="download"></dso-icon>
<!-- Email -->
<dso-icon icon="email"></dso-icon>
<!-- Exclamation -->
<dso-icon icon="exclamation"></dso-icon>
<!-- External Link -->
<dso-icon icon="external-link"></dso-icon>
<!-- Eye Slash -->
<dso-icon icon="eye-slash"></dso-icon>
<!-- Eye -->
<dso-icon icon="eye"></dso-icon>
<!-- Filter -->
<dso-icon icon="filter"></dso-icon>
<!-- Forbidden -->
<dso-icon icon="forbidden"></dso-icon>
<!-- House -->
<dso-icon icon="house"></dso-icon>
<!-- Info Active -->
<dso-icon icon="info-active"></dso-icon>
<!-- Info I -->
<dso-icon icon="info-i"></dso-icon>
<!-- Info -->
<dso-icon icon="info"></dso-icon>
<!-- Infrastructure -->
<dso-icon icon="infrastructure"></dso-icon>
<!-- Label -->
<dso-icon icon="label"></dso-icon>
<!-- Landscape -->
<dso-icon icon="landscape"></dso-icon>
<!-- Layers -->
<dso-icon icon="layers"></dso-icon>
<!-- Location Outline -->
<dso-icon icon="location-outline"></dso-icon>
<!-- Location -->
<dso-icon icon="location"></dso-icon>
<!-- Lock -->
<dso-icon icon="lock"></dso-icon>
<!-- Magnet -->
<dso-icon icon="magnet"></dso-icon>
<!-- Map Location -->
<dso-icon icon="map-location"></dso-icon>
<!-- Marker -->
<dso-icon icon="marker"></dso-icon>
<!-- Measurement -->
<dso-icon icon="measurement"></dso-icon>
<!-- Minus Square -->
<dso-icon icon="minus-square"></dso-icon>
<!-- Minus -->
<dso-icon icon="minus"></dso-icon>
<!-- More -->
<dso-icon icon="more"></dso-icon>
<!-- Municipality -->
<dso-icon icon="municipality"></dso-icon>
<!-- Nature -->
<dso-icon icon="nature"></dso-icon>
<!-- New Window -->
<dso-icon icon="new-window"></dso-icon>
<!-- Paperclip -->
<dso-icon icon="paperclip"></dso-icon>
<!-- Parking -->
<dso-icon icon="parking"></dso-icon>
<!-- Pencil -->
<dso-icon icon="pencil"></dso-icon>
<!-- Pin Outline -->
<dso-icon icon="pin-outline"></dso-icon>
<!-- Pin -->
<dso-icon icon="pin"></dso-icon>
<!-- Plus Square -->
<dso-icon icon="plus-square"></dso-icon>
<!-- Plus -->
<dso-icon icon="plus"></dso-icon>
<!-- Print -->
<dso-icon icon="print"></dso-icon>
<!-- Redo -->
<dso-icon icon="redo"></dso-icon>
<!-- Scale -->
<dso-icon icon="scale"></dso-icon>
<!-- Search -->
<dso-icon icon="search"></dso-icon>
<!-- Sitemap -->
<dso-icon icon="sitemap"></dso-icon>
<!-- Soil -->
<dso-icon icon="soil"></dso-icon>
<!-- Sort Ascending -->
<dso-icon icon="sort-ascending"></dso-icon>
<!-- Sort Descending -->
<dso-icon icon="sort-descending"></dso-icon>
<!-- Sort -->
<dso-icon icon="sort"></dso-icon>
<!-- Status Danger -->
<dso-icon icon="status-danger"></dso-icon>
<!-- Status Info -->
<dso-icon icon="status-info"></dso-icon>
<!-- Status Success -->
<dso-icon icon="status-success"></dso-icon>
<!-- Status Warning -->
<dso-icon icon="status-warning"></dso-icon>
<!-- Table -->
<dso-icon icon="table"></dso-icon>
<!-- Times -->
<dso-icon icon="times"></dso-icon>
<!-- Trash -->
<dso-icon icon="trash"></dso-icon>
<!-- Undo -->
<dso-icon icon="undo"></dso-icon>
<!-- User Line -->
<dso-icon icon="user-line"></dso-icon>
<!-- User -->
<dso-icon icon="user"></dso-icon>
<!-- Users -->
<dso-icon icon="users"></dso-icon>
<!-- Water -->
<dso-icon icon="water"></dso-icon>
<!-- Wip Wip -->
<dso-icon icon="wip-wip"></dso-icon>
<dso-icon icon="{{ icon }}"></dso-icon>
/* Air */
icon: air
/* Angle Down */
icon: angle-down
/* Angle Left */
icon: angle-left
/* Angle Right */
icon: angle-right
/* Angle Up */
icon: angle-up
/* Balloon */
icon: balloon
/* Bars */
icon: bars
/* Buildings */
icon: buildings
/* Calendar */
icon: calendar
/* Caret Down */
icon: caret-down
/* Check */
icon: check
/* Chevron Down */
icon: chevron-down
/* Chevron Left */
icon: chevron-left
/* Chevron Right */
icon: chevron-right
/* Chevron Up */
icon: chevron-up
/* Circle Notch */
icon: circle-notch
/* Clock */
icon: clock
/* Copy */
icon: copy
/* Crown */
icon: crown
/* Cultural */
icon: cultural
/* Download */
icon: download
/* Email */
icon: email
/* Exclamation */
icon: exclamation
/* External Link */
icon: external-link
/* Eye Slash */
icon: eye-slash
/* Eye */
icon: eye
/* Filter */
icon: filter
/* Forbidden */
icon: forbidden
/* House */
icon: house
/* Info Active */
icon: info-active
/* Info I */
icon: info-i
/* Info */
icon: info
/* Infrastructure */
icon: infrastructure
/* Label */
icon: label
/* Landscape */
icon: landscape
/* Layers */
icon: layers
/* Location Outline */
icon: location-outline
/* Location */
icon: location
/* Lock */
icon: lock
/* Magnet */
icon: magnet
/* Map Location */
icon: map-location
/* Marker */
icon: marker
/* Measurement */
icon: measurement
/* Minus Square */
icon: minus-square
/* Minus */
icon: minus
/* More */
icon: more
/* Municipality */
icon: municipality
/* Nature */
icon: nature
/* New Window */
icon: new-window
/* Paperclip */
icon: paperclip
/* Parking */
icon: parking
/* Pencil */
icon: pencil
/* Pin Outline */
icon: pin-outline
/* Pin */
icon: pin
/* Plus Square */
icon: plus-square
/* Plus */
icon: plus
/* Print */
icon: print
/* Redo */
icon: redo
/* Scale */
icon: scale
/* Search */
icon: search
/* Sitemap */
icon: sitemap
/* Soil */
icon: soil
/* Sort Ascending */
icon: sort-ascending
/* Sort Descending */
icon: sort-descending
/* Sort */
icon: sort
/* Status Danger */
icon: status-danger
/* Status Info */
icon: status-info
/* Status Success */
icon: status-success
/* Status Warning */
icon: status-warning
/* Table */
icon: table
/* Times */
icon: times
/* Trash */
icon: trash
/* Undo */
icon: undo
/* User Line */
icon: user-line
/* User */
icon: user
/* Users */
icon: users
/* Water */
icon: water
/* Wip Wip */
icon: wip-wip