Gå til sidens indhold

Design

Ikoner

Ikoner benyttes til visuelt at understrege en handling eller en information. Ikoner kan underbygge et budskab eller gøre det lettere at afkode en side. Ikoner kan dog sjældent erstatte tekst.

Nedenfor vises de ikoner som er inkluderet i designsystemet. Ikonerne er reserveret til deres specifikke formål og skal anvendes som sådan. Hvis du har brug for yderligere ikoner henviser vi til Material Design, Material Design Icons eller lignende.

Bruges eller skabes andre ikoner end de viste skal de passe ind visuelt og de må ikke ligne eller kunne forvirres med designsystemets andre ikoner.

Example of add
Example of alert-outline
Example of angle-arrow-down
Example of angle-arrow-up
Example of arrow-left
Example of arrow-right
Example of calendar
Example of check
Example of check-circle-outline
Example of chevron-left
Example of chevron-right
Example of close
Example of close-circle
Example of close-circle-outline
Example of content-save
Example of delete
Example of delete-outline
Example of dots-vertical
Example of download
Example of error
Example of file
Example of help
Example of help-circle-outline
Example of info
Example of language
Example of magnify
Example of menu-down
Example of menu-left
Example of menu-right
Example of menu-up
Example of minus
Example of open-in-new
Example of pencil
Example of plus
Example of printer
Example of refresh
Example of save
Example of settings
Example of sort-acending
Example of sort-descending
Example of sort-none
Example of success
Example of warning

Retningslinjer

Ikoner kan understøtte din kommunikation visuelt. Ikoner kan enten skabe klarhed eller tilføre forvirring. 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.

Anbefalinger

  • Brug kun ikoner, hvor de understøtter brugerens forståelse af det som kommunikeres.
  • Følg gængse konventioner for brug af ikoner, hvis de findes. Fx Hus-ikonet anvendes til “hjem”, som går til en forside. Lup-ikonet, bruges til at indikere en søgemulighed, osv.
  • Undgå dekorative ikoner, de bliver let til visuel støj og øger dermed den kognitive belastning.
  • Illustrative ikoner skal bruges med omtanke, hvis brugeren ikke forstår ikonet umiddelbart er det oftest bedre at bruge tekst uden ikon.

Illustrative ikoner

Illustrative ikoner er unikke for en given selvbetjeningsløsning, der giver mening i den givne kontekst, men ikke nødvendigvis i andre sammenhænge.

Ikoner der anvendes illustrativt må ikke ligne eller være de samme som anvendes til navigation, feedback og funktionalitet.

Vi bruger Material Design ikoner som udgangspunkt, men illustrative ikoner kan også tegnes specifikt til en løsning. Gøres dette, anbefaler vi at følge Material Designs anvisninger for design af ikoner.

Links