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.
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.
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
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).dso-icons.svg
:node_modules/dso-toolkit/dist/library/dso-icons.svg
wordt gebundled;use href
naar een externe URI of data URI. Elke implementatie van de toolkit moet deze tekortkoming compenseren. De library is ook een implementatie van de toolkit en maakt gebruik van www.dso-toolkit.nl) maakt gebruik van svg4everybody.
<!-- Air -->
<svg class="di di-air">
<use href="../../dso-icons.svg#air" />
</svg>
<!-- Angle Down -->
<svg class="di di-angle-down">
<use href="../../dso-icons.svg#angle-down" />
</svg>
<!-- Angle Left -->
<svg class="di di-angle-left">
<use href="../../dso-icons.svg#angle-left" />
</svg>
<!-- Angle Right -->
<svg class="di di-angle-right">
<use href="../../dso-icons.svg#angle-right" />
</svg>
<!-- Angle Up -->
<svg class="di di-angle-up">
<use href="../../dso-icons.svg#angle-up" />
</svg>
<!-- Balloon -->
<svg class="di di-balloon">
<use href="../../dso-icons.svg#balloon" />
</svg>
<!-- Bars -->
<svg class="di di-bars">
<use href="../../dso-icons.svg#bars" />
</svg>
<!-- Buildings -->
<svg class="di di-buildings">
<use href="../../dso-icons.svg#buildings" />
</svg>
<!-- Calendar -->
<svg class="di di-calendar">
<use href="../../dso-icons.svg#calendar" />
</svg>
<!-- Caret Down -->
<svg class="di di-caret-down">
<use href="../../dso-icons.svg#caret-down" />
</svg>
<!-- Check -->
<svg class="di di-check">
<use href="../../dso-icons.svg#check" />
</svg>
<!-- Chevron Down -->
<svg class="di di-chevron-down">
<use href="../../dso-icons.svg#chevron-down" />
</svg>
<!-- Chevron Left -->
<svg class="di di-chevron-left">
<use href="../../dso-icons.svg#chevron-left" />
</svg>
<!-- Chevron Right -->
<svg class="di di-chevron-right">
<use href="../../dso-icons.svg#chevron-right" />
</svg>
<!-- Chevron Up -->
<svg class="di di-chevron-up">
<use href="../../dso-icons.svg#chevron-up" />
</svg>
<!-- Circle Notch -->
<svg class="di di-circle-notch">
<use href="../../dso-icons.svg#circle-notch" />
</svg>
<!-- Clock -->
<svg class="di di-clock">
<use href="../../dso-icons.svg#clock" />
</svg>
<!-- Copy -->
<svg class="di di-copy">
<use href="../../dso-icons.svg#copy" />
</svg>
<!-- Crown -->
<svg class="di di-crown">
<use href="../../dso-icons.svg#crown" />
</svg>
<!-- Cultural -->
<svg class="di di-cultural">
<use href="../../dso-icons.svg#cultural" />
</svg>
<!-- Download -->
<svg class="di di-download">
<use href="../../dso-icons.svg#download" />
</svg>
<!-- Email -->
<svg class="di di-email">
<use href="../../dso-icons.svg#email" />
</svg>
<!-- Exclamation -->
<svg class="di di-exclamation">
<use href="../../dso-icons.svg#exclamation" />
</svg>
<!-- External Link -->
<svg class="di di-external-link">
<use href="../../dso-icons.svg#external-link" />
</svg>
<!-- Eye Slash -->
<svg class="di di-eye-slash">
<use href="../../dso-icons.svg#eye-slash" />
</svg>
<!-- Eye -->
<svg class="di di-eye">
<use href="../../dso-icons.svg#eye" />
</svg>
<!-- Filter -->
<svg class="di di-filter">
<use href="../../dso-icons.svg#filter" />
</svg>
<!-- Forbidden -->
<svg class="di di-forbidden">
<use href="../../dso-icons.svg#forbidden" />
</svg>
<!-- House -->
<svg class="di di-house">
<use href="../../dso-icons.svg#house" />
</svg>
<!-- Info Active -->
<svg class="di di-info-active">
<use href="../../dso-icons.svg#info-active" />
</svg>
<!-- Info I -->
<svg class="di di-info-i">
<use href="../../dso-icons.svg#info-i" />
</svg>
<!-- Info -->
<svg class="di di-info">
<use href="../../dso-icons.svg#info" />
</svg>
<!-- Infrastructure -->
<svg class="di di-infrastructure">
<use href="../../dso-icons.svg#infrastructure" />
</svg>
<!-- Label -->
<svg class="di di-label">
<use href="../../dso-icons.svg#label" />
</svg>
<!-- Landscape -->
<svg class="di di-landscape">
<use href="../../dso-icons.svg#landscape" />
</svg>
<!-- Location -->
<svg class="di di-location">
<use href="../../dso-icons.svg#location" />
</svg>
<!-- Lock -->
<svg class="di di-lock">
<use href="../../dso-icons.svg#lock" />
</svg>
<!-- Magnet -->
<svg class="di di-magnet">
<use href="../../dso-icons.svg#magnet" />
</svg>
<!-- Map Location -->
<svg class="di di-map-location">
<use href="../../dso-icons.svg#map-location" />
</svg>
<!-- Marker -->
<svg class="di di-marker">
<use href="../../dso-icons.svg#marker" />
</svg>
<!-- Measurement -->
<svg class="di di-measurement">
<use href="../../dso-icons.svg#measurement" />
</svg>
<!-- Minus Square -->
<svg class="di di-minus-square">
<use href="../../dso-icons.svg#minus-square" />
</svg>
<!-- More -->
<svg class="di di-more">
<use href="../../dso-icons.svg#more" />
</svg>
<!-- Municipality -->
<svg class="di di-municipality">
<use href="../../dso-icons.svg#municipality" />
</svg>
<!-- Nature -->
<svg class="di di-nature">
<use href="../../dso-icons.svg#nature" />
</svg>
<!-- Paperclip -->
<svg class="di di-paperclip">
<use href="../../dso-icons.svg#paperclip" />
</svg>
<!-- Parking -->
<svg class="di di-parking">
<use href="../../dso-icons.svg#parking" />
</svg>
<!-- Pencil -->
<svg class="di di-pencil">
<use href="../../dso-icons.svg#pencil" />
</svg>
<!-- Pin -->
<svg class="di di-pin">
<use href="../../dso-icons.svg#pin" />
</svg>
<!-- Plus Square -->
<svg class="di di-plus-square">
<use href="../../dso-icons.svg#plus-square" />
</svg>
<!-- Plus -->
<svg class="di di-plus">
<use href="../../dso-icons.svg#plus" />
</svg>
<!-- Print -->
<svg class="di di-print">
<use href="../../dso-icons.svg#print" />
</svg>
<!-- Redo -->
<svg class="di di-redo">
<use href="../../dso-icons.svg#redo" />
</svg>
<!-- Search -->
<svg class="di di-search">
<use href="../../dso-icons.svg#search" />
</svg>
<!-- Sitemap -->
<svg class="di di-sitemap">
<use href="../../dso-icons.svg#sitemap" />
</svg>
<!-- Soil -->
<svg class="di di-soil">
<use href="../../dso-icons.svg#soil" />
</svg>
<!-- Sort Ascending -->
<svg class="di di-sort-ascending">
<use href="../../dso-icons.svg#sort-ascending" />
</svg>
<!-- Sort Descending -->
<svg class="di di-sort-descending">
<use href="../../dso-icons.svg#sort-descending" />
</svg>
<!-- Sort -->
<svg class="di di-sort">
<use href="../../dso-icons.svg#sort" />
</svg>
<!-- Status Danger -->
<svg class="di di-status-danger">
<use href="../../dso-icons.svg#status-danger" />
</svg>
<!-- Status Info -->
<svg class="di di-status-info">
<use href="../../dso-icons.svg#status-info" />
</svg>
<!-- Status Success -->
<svg class="di di-status-success">
<use href="../../dso-icons.svg#status-success" />
</svg>
<!-- Status Warning -->
<svg class="di di-status-warning">
<use href="../../dso-icons.svg#status-warning" />
</svg>
<!-- Table -->
<svg class="di di-table">
<use href="../../dso-icons.svg#table" />
</svg>
<!-- Times -->
<svg class="di di-times">
<use href="../../dso-icons.svg#times" />
</svg>
<!-- Trash -->
<svg class="di di-trash">
<use href="../../dso-icons.svg#trash" />
</svg>
<!-- Undo -->
<svg class="di di-undo">
<use href="../../dso-icons.svg#undo" />
</svg>
<!-- User Line -->
<svg class="di di-user-line">
<use href="../../dso-icons.svg#user-line" />
</svg>
<!-- User -->
<svg class="di di-user">
<use href="../../dso-icons.svg#user" />
</svg>
<!-- Users -->
<svg class="di di-users">
<use href="../../dso-icons.svg#users" />
</svg>
<!-- Water -->
<svg class="di di-water">
<use href="../../dso-icons.svg#water" />
</svg>
<!-- Wip Wip -->
<svg class="di di-wip-wip">
<use href="../../dso-icons.svg#wip-wip" />
</svg>
<svg class="di di-{{ icon }}">
<use href="{{ '/dso-icons.svg' | path }}#{{ icon | split(' ') | first }}" />
</svg>
/* 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
/* 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
/* More */
icon: more
/* Municipality */
icon: municipality
/* Nature */
icon: nature
/* Paperclip */
icon: paperclip
/* Parking */
icon: parking
/* Pencil */
icon: pencil
/* Pin */
icon: pin
/* Plus Square */
icon: plus-square
/* Plus */
icon: plus
/* Print */
icon: print
/* Redo */
icon: redo
/* 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