Egnet til:
- å forenkle navigasjonen og markere innhold
- å gi visuell støtte til tekstlig innhold
Uegnet til:
- å bruke som dekorasjon.
Teknisk dokumentasjon
Se Icon i Storybook for tekniske detaljer.
Varianter
I designsystemet skiller vi mellom systemikoner og temaikoner. Systemikoner er små enkle ikoner og er ofte knyttet til vanlige handlinger eller varsler. Temaikoner er litt mer detaljerte og gjerne brukes i forbindelse med seksjoner og inndelinger.
Systemikoner
- Kan generelt brukes som en del av grensesnittet.
- Brukes til å vise handlinger du kan utføre, slik som å skrive ut og lagre favoritt, eller for å markere hva slags type innhold du ser.
Temaikoner
- Bruk temaikoner sammen med overskrift i starten på en temaseksjon.
- Bruk størrelse på 48px og oppover.
- Unngå å bruke temaikoner som knapper eller interaksjonselementer, med disse unntakene:
- som del av en forsideknapp.
- som del av en seksjon eller et innholdskort, med interaksjonselementer ved siden av.
Hvordan bruke komponenten
- Ikoner uten tekstlig beskrivelse (title eller ariaLabel) behandles som «pynt» og skjules for skjermleser.
- Ikoner med title viser denne som tooltip.
- Du finner mer om bruken av ikoner i visuell identitet.
Universell utforming
- Hvis ikonet er viktig for bruk eller forståelse skal det være tydelig kontrast mellom ikonfarge og bakgrunn. WCAG krever minst 3.0 i kontrast.
- Ikoner som kun er pynt/dekor bør skjules for skjermleser. Ikoner som er meningsbærende må gis et tekstalternativ, f.eks. med attributtene aria-label eller alt.