Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Ikoner
Ikoner benyttes til visuelt at understrege en handling eller en information. Ikoner kan underbygge et budskab og gøre det lettere at afkode en side. Ikoner kan dog sjældent erstatte tekst.
Sådan bruges ikoner
Anvendes til
Brug ikoner som supplement til tekst for visuelt at understøtte brugerens forståelse af sidens indhold.
Anvendes ikke til
Brug ikke dekorative ikoner til at “pynte” med, da de let udgør en visuel støj. Dette øger den kognitive belastning og mindsker dermed brugervenligheden og brugerens effektivitet.
Vejledning
Følg gængse konventioner for brug af ikoner, når de findes, og brug kun designsystemets ikoner til den betydning, der er angivet i ikonoversigten. Fx anvendes Hus-ikonet altid til “hjem”, som går til en forside. Lup-ikonet bruges til at indikere en søgemulighed, osv.
Brug så vidt muligt altid tekst sammen med ikonet (Harley, 2014).
Tilføj kun ikoner, hvis det understøtter kommunikationen. Er du i tvivl, så vælg tekst alene. Hvorvidt du skal anvende et ikon eller ej afhænger i høj grad af konteksten. En brugertest kan afgøre, om ikonerne giver værdi i den enkelte løsning (Harley, 2016).
Hvis du mangler et ikon
Det Fælles Designsystem bruger ikoner fra Material Design. Hvis du har brug for ikoner, der ikke allerede findes i ikonoversigten, henviser vi til Material Symbols, som er Material Designs ikonbibliotek. Hent ikonerne i weight 400, grade 100, optical size 24dp og style outline. Vi anbefaler, at du implementerer de nye ikoner på samme måde som de øvrige ikoner i designsystemet.
Hvis du heller ikke finder det ønskede ikon der, kan du lave dit eget ikon. Nye ikoner skal passe ind visuelt og følge Material Designs vejledning til design af ikoner. Det er vigtigt at brugerteste nye ikoner for at være sikker på, at brugerne forstår dem.
Ikonoversigt
Følgende ikoner er en del af Det Fælles Designsystem. Brug kun ikonerne til at kommunikere det, der er angivet her, da det kan skabe forvirring hos brugerne, hvis det samme ikon tilknyttes forskellige betydninger.
Konventionelle ikoner
Beskeder (feedback)
Tilstande
Filtyper
Funktionalitet
Illustrative
Tekstredigering
Referencer
Ikoner indsat som svg med ikonsamling (anbefalet)
Ikonsamlingen gør, at du kan indsætte ikoner med <svg>. Før dette virker, er du nødt til at implementere ikonsamlingen, der skal indsættes på hver side i løsningen.
Implementering
Placér ikonsamlingen i toppen af <body> i et område, der er skjult:
<body>
<div class="hide-base-svg">
<svg xmlns="http://www.w3.org/2000/svg">
<!-- Ikonsamling -->
</svg>
</div>
...
</body>Ikonerne i ikonsamlingen er defineret ved hjælp af <symbol>, der hver har et unikt id. Eksempelvis er ikonet for “sortér tabel (faldende)” defineret ved:
<symbol id="sort-table-descending" viewBox="0 0 24 24"><path d="M6.1,13.5l5.9,5.9l5.9-5.9H6.1z"/></symbol>Det anbefales at indsætte alle ikoner i samlingen på hver side, men du kan også vælge kun at medtage de ikoner, der er relevante for den enkelte side. Du kan se den fulde ikonsamling ved at åbne nedenstående eksempel i et nyt vindue.
<div class="hide-base-svg">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="accessibility-new" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20.5 6c-2.61.7-5.67 1-8.5 1s-5.89-.3-8.5-1L3 8c1.86.5 4 .83 6 1v13h2v-6h2v6h2V9c2-.17 4.14-.5 6-1l-.5-2zM12 6c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></symbol>
<symbol id="account-circle" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7.07 18.28c.43-.9 3.05-1.78 4.93-1.78s4.51.88 4.93 1.78C15.57 19.36 13.86 20 12 20s-3.57-.64-4.93-1.72zm11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33C4.62 15.49 4 13.82 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.49-1.64 4.83zM12 6c-1.94 0-3.5 1.56-3.5 3.5S10.06 13 12 13s3.5-1.56 3.5-3.5S13.94 6 12 6zm0 5c-.83 0-1.5-.67-1.5-1.5S11.17 8 12 8s1.5.67 1.5 1.5S12.83 11 12 11z"/></symbol>
<!-- and more -->
</svg>
</div>Anvendelse
For at anvende et ikon skal du indsætte det ved hjælp af <svg> og referere til det korrekte id i ikonsamlingen. For eksempel skal ikonet for “print (udskriv)” indsættes med:
Tilpasning af ikonet til teksten
Tilføj klassen inline-svg på ikoner, som skal fremgå i en tekst. Ikonet vil da tilpasse sig linjehøjden. Se eksemplet herunder:
Der er et ikon midt i denne sætning.
Ikoner indsat med klasser
Ikoner kan indsættes ved hjælp af klasser på følgende måde:
Denne metode har nogle begrænsninger, hvorfor vi anbefaler, at man benytter ikonsamlingen i stedet for.
Tilgængelighed
Ikoner bør tilføjes en aria-label tekst til elementet, der beskriver ikonet, så skærmlæsere kan læse ikonet op, såfremt ikonet har betydning for forståelsen.
Dekorative ikoner bør undgås, men hvis de bruges, skal de ikke beskrives af skærmlæsere eller have beskrivende attributter, da de ikke bærer nogen betydning eller er vigtige for brugeren. Hvis ikonet ikke skal læses op, tilføj da attributten aria-hidden="true". Denne attribut vil gøre ikonet usynligt for skærmlæsere.
Da Internet Explorer sætter fokus på svg-elementer, bør focusable="false" tilføjes, således at der ikke længeres sættes fokus på ikonet med tastaturet.