Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Styleguide

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.

Eksempel

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

  • Eksternt link (åbner ny side/fane)

  • Forside (Hjem)

  • Gem

  • Print (udskriv)

  • Slet

  • Søg

Beskeder (feedback)

  • Advarsel

  • Fejl

  • Information

  • Hjælp

  • Succes

Navigation

  • Flere menupunkter (horisontalt)

  • Frem (højre)

  • Menu

  • Overflow menu (vertikalt)

  • Paginering forrige

  • Paginering første

  • Paginering næste

  • Paginering sidste

  • Pil frem (højre)

  • Pil ned

  • Pil op

  • Pil tilbage (venstre)

  • Tilbage (venstre)

  • Undermenu højre

  • Undermenu venstre

  • Langt tilbage

  • Langt frem

Tilstande

  • Detalje lukket

  • Detalje åben / Fold overflow ud

  • Fold overflow ind

  • Formindsk

  • Forstør

  • Fuld skærm

  • Luk accordion (minus)

  • Åbn accordion (plus)

  • Luk fuld skærm

  • Ikke sorteret

  • Log af (lukket hængelås)

  • Skjul

  • Sortér alfabetisk

  • Udvid (chevron)

  • Indskrænk (chevron)

  • Vis

  • Sortér tabel (faldende)

  • Sortér tabel (stigende)

  • Sortér tabel

  • Sortér

  • Sortér (stigende)

  • Sortér (faldende)

Filtyper

  • Billede

  • Excel

  • PDF

  • Word

Funktionalitet

  • Annuller (luk)

  • Afventer

  • Beregner (lommeregner)

  • Besvar

  • Chat

  • Dato / kalender

  • Del

  • Download

  • Download afsluttet

  • Email

  • Feedback

  • Fjern person/bruger

  • Flag fyldt

  • Flag tomt

  • Flyt

  • Indbetaling (kreditkort)

  • Indstillinger

  • Kamera (tag billede)

  • Kontaktoplysninger

  • Kopi

  • Liste gennemført

  • Mappe

  • Notifikation/besked

  • Opdater (genindlæs)

  • Opret mappe

  • Oversigt (overblik)

  • Placering (adresse)

  • Rediger

  • Send

  • Sprog (globe)

  • Stjerne fyldt (markeret)

  • Stjerne tom (ikke-markeret)

  • Support

  • Synkroniser (refresh)

  • Tid (tidsinterval)

  • Tilføj billede

  • Tilføj dokument

  • Tilføj til liste

  • Tilføj person/bruger

  • Udført (korrekt, gennemført)

  • Upload (eksportér)

  • Vedhæft (bilag)

  • Videresend

  • Vis i liste form

  • Vis i liste form og vindue

  • Vælg tema (palette)

  • Åben mappe

Illustrative

  • Corona (Covid-19)

  • Opgørelse / Resumé / Opsummering

  • Opgave

  • Penge/Betaling/Opkrævning

  • Data

  • Analyse

  • Kort

  • Links

  • Person (bruger)

  • Kurv (afventer køb)

  • Videokamera

  • Headset

  • Desktop

  • Laptop

  • Mobiltelefon

  • Mus

  • Tilgængelighed

  • Liste

  • Tjekliste

  • Bogmærke

  • Bogmærker

  • Kontaktoplysninger

  • Personer (brugere)

  • Gruppe (møde)

  • Forum

  • Dokument (sag)

  • Virksomhed

  • Elev

  • Erhverv/Erhvervsuddannet

  • Brugerprofil

  • Fuldmagtsprofil (3. part)

  • Supporter (telefonrådgiver)

  • Lastbil (transport)

  • Traktor (landmand)

  • Studerende (studie)

  • Håndværk (bygge- og anlægsarbejde)

  • Videnskab (kemi)

  • Bil (transport)

  • Parameter (finjustering)

Tekstredigering

  • Formater tekst

  • Tekststørrelse

  • Fed

  • Kursiv

  • Understregning

  • Farve

  • Baggrundsfarve

  • Ryd tekstformatering

  • Punktopstilling

  • Punktopstilling numerisk

  • Indryk højre

  • Indryk venstre

  • Venstrestil tekst

  • Centreret tekst

  • Højrestillet tekst

  • Lige marginer

Ingen søgeresultater for “”. Prøv et andet søgeord, eller kig efter ikoner fra Material Symbols.

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.

Kodeeksempel
<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:

Kodeeksempel
<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#print"></use></svg>

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:

Kodeeksempel
<i class="icon icon-print"></i>

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.