Ikoner
Ikoner · Ikonbibliotek · Custom ikoner · Vælg et ikon · Brug dine egne ikoner
Ikoner er små symboler, du kan sætte på komponenter, fx knapper, linkbokse, infobokse, CTA-bannere og accordions. De gør det nemmere at forstå og finde rundt i indholdet. Du kan vælge et ikon fra ikonbiblioteket eller uploade dit eget ikon (et custom ikon).
Her kan du læse, hvordan du vælger et ikon, hvordan du bruger dine egne ikoner, og hvad du skal tænke på, når du laver dem.
Vælg et ikon
Åbn den komponent, der skal have et ikon. I feltet Ikon klikker du på Åbn picker for at vælge et ikon fra biblioteket.
Vil du bruge dit eget ikon, bruger du i stedet feltet Ikon - billede. Et ikon i Ikon - billede erstatter det ikon, der er valgt i Ikon.
I vinduet Vælg ikon kan du skrive i feltet Filtrer ikoner… eller klikke på en af kategorierne, fx Pile eller Personer. Klik på det ikon, du vil bruge.
Ikonerne i biblioteket er lavet, så de passer til platformen, og de får automatisk den rigtige farve.
Du kan fx sætte ikoner på:
- CTA-banner og temakomponenter
- Infobokse
- Linkbokse - manuel (Linkboks, Dynamisk linkboks og Linkkort)
- Brede knapper og knapper med ikon
- Åbningstider
- Overskrift og Krisebanner
- Accordion
- Sideinfo på artikelsider og sektionssider
Nogle komponenter henter selv ikonet fra den side, de linker til. Så bliver ikonet vist automatisk.
Brug dine egne ikoner
Klik på Vælg i feltet Ikon - billede. I vinduet Vælg medie kan du vælge et ikon, der allerede ligger i mediearkivet, eller klikke på Upload for at hente et nyt. Ikonet kan være en SVG-fil eller et billede.
Du kan også uploade dine ikoner i Mediearkiv i den øverste menu først og vælge dem bagefter.
Du kan ikke ændre farven på dine egne ikoner på hjemmesiden. Farvede baggrunde kan derfor gøre ikonet svært at se.
- Lav flere farvevarianter, så du har et ikon, der passer til hver baggrundsfarve.
- Vælg en farve, der virker på tværs. Ikoner, der bliver hentet automatisk fra en side, kan du ikke skifte på komponenten. Derfor er det en fordel, hvis farven passer til flere baggrunde.
Whitespace er den tomme luft omkring ikonet. Læg luften som en usynlig baggrund i dit tegneprogram, og gør den lige stor på alle dine ikoner. Så får ikonerne samme størrelse og står pænt på linje.
På eksemplet er de første ikoner lavet uden whitespace, og de sidste to med.
Ikoner, der kun er pynt og ikke fortæller noget selv, skal ikke leve op til kravene om kontrast. Ikoner, som du sætter på en komponent, står altid sammen med en tekst, så teksten skal fortælle det vigtige.