Icon
Ikon-komponenten viser SVG-ikoner fra SpareBank 1s CDN ved hjelp av CSS mask-image. Ikoner arver farge fra omgivende tekst.
Egnet til
- Dekorative ikoner ved siden av tekst
- Semantiske ikoner som formidler informasjon uten tilstøtende tekst (med
ariaLabel)
Uegnet til
- Ikoner som eneste interaktive element uten tilgjengelig navn — bruk en knapp med
aria-labelrundt ikonet
Kom i gang
Result
Loading...
Kode
Live Editor
<Icon name="hjem" />
Eksempler
Størrelser
Result
Loading...
Kode
Live Editor
<HStack alignItems="center"> <Icon name="hjem" size="sm" /> <Icon name="hjem" size="md" /> <Icon name="hjem" size="lg" /> <Icon name="hjem" size="xl" /> </HStack>
Semantisk ikon
Bruk ariaLabel når ikonet formidler informasjon som ikke er tilgjengelig andre steder:
Result
Loading...
Kode
Live Editor
<Icon name="hjem" ariaLabel="Gå til forsiden" />
Retningslinjer
Bruk ikon sammen med tekst der det er mulig
Ikoner alene er tvetydige. Kombinasjon med synlig tekst gjør intensjonen klar for alle brukere, uavhengig av kjennskap til ikonspråket.
Dekorative ikoner trenger ingen label
Ikoner som støtter tekst som allerede forklarer innholdet er dekorative. Ikke legg til ariaLabel — det gir dobbel annonsering til skjermlesere.
Meningsbærende ikoner trenger aria-label
Når et ikon brukes alene uten tilstøtende synlig tekst og formidler informasjon, sett ariaLabel. Eksempel: et varselsikon som er eneste indikasjon på feil.
Ikoner i knapper og lenker
Et ikon i en knapp eller lenke trenger ikke egen ariaLabel — sett aria-label på den interaktive komponenten. Dobbel merking gir støy for skjermleserbrukere.
Farge er ikke alene bærer av mening
Ikonet skal kommunisere gjennom form, ikke farge alene. Brukere med fargeblindhet eller høy kontrast-modus skal forstå ikonet uten å se fargen.
Velg størrelse etter kontekst
sm egner seg til kompakt UI som etiketter og badges. md (standard) passer ved siden av tekst i løpende innhold. lg og xl brukes til frittstående ikoner, navigasjon og illustrerende elementer.
Universell utforming
Hva du selv må sørge for
- Semantiske ikoner trenger aria-label — sett
ariaLabelnår ikonet formidler informasjon uten tilstøtende synlig tekst - Ikoner i knapper — knapper med kun ikon trenger
aria-labelpå knappen, ikke på ikonet
Hva komponenten gjør automatisk
aria-hidden="true"settes automatisk på dekorative ikonerrole="img"settes automatisk nåraria-labeler til stede--ii-icon-urlsettes på elementet slik atmask-imagei CSS kan bruke den
Skjermleser
- Dekorativt ikon (standard): leses ikke opp — skjult med aria-hidden="true"
- Semantisk ikon med aria-label: "[label], bilde" — leses opp som et bilde
- Semantisk ikon med aria-labelledby: role="img" settes, og skjermleseren annonserer teksten attributtet peker på
WCAG-kriterier
Sist gjennomgått: 2026-05-21 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier7 ditt ansvar · 2 håndtert · 20 ikke relevant · 0 ikke på plass
Ditt ansvar (7)
| Kriterium | Nivå | Hva du må gjøre |
|---|---|---|
| 1.1.1 Ikke-tekstlig innhold | A | Legg til aria-label for semantiske ikoner. Ikoner er dekorative som standard og skjules for skjermlesere. Når et ikon formidler informasjon som ikke er tilgjengelig andre steder, må du sette aria-label på ix-icon eller Icon-komponenten. Eksempel: `<Icon name="sparing" ariaLabel="Sparekonto" />` |
| 1.1.1 Ikke-tekstlig innhold | A | Ikke bruk ikon alene som eneste informasjonskilde uten label. Ikoner uten tilstøtende synlig tekst eller aria-label er uforståelige for skjermleserbrukere. Bruk synlig tekst ved siden av ikonet, eller sett aria-label direkte på ikonet. |
| 2.4.6 Overskrifter og ledetekster | AA | Ikke bruk ikon alene som eneste informasjonskilde uten label. Ikoner uten tilstøtende synlig tekst eller aria-label er uforståelige for skjermleserbrukere. Bruk synlig tekst ved siden av ikonet, eller sett aria-label direkte på ikonet. |
| 4.1.2 Navn, rolle, verdi | A | Ikon i knapp: sett aria-label på knappen, ikke ikonet. Når et ikon brukes inne i en knapp uten synlig tekst, skal aria-label settes på selve knapp-elementet — ikke på ikonet. Ikonet skal da ha aria-hidden="true" (som er standard). Eksempel: ```html <button aria-label="Gå til forsiden"> <ix-icon name="hjem"></ix-icon> </button> ``` |
| 2.4.6 Overskrifter og ledetekster | AA | Ikon i knapp: sett aria-label på knappen, ikke ikonet. Når et ikon brukes inne i en knapp uten synlig tekst, skal aria-label settes på selve knapp-elementet — ikke på ikonet. Ikonet skal da ha aria-hidden="true" (som er standard). Eksempel: ```html <button aria-label="Gå til forsiden"> <ix-icon name="hjem"></ix-icon> </button> ``` |
| 1.4.11 Kontrast for ikke-tekstlig innhold | AA | Sørg for tilstrekkelig kontrastforhold for semantiske ikoner. Ikoner med aria-label er grafiske objekter og krever 3:1 kontrast mot bakgrunn (WCAG 1.4.11). ix-icon bruker currentColor, så ikonfargen er lik tekstfargen — dersom du sikrer 4.5:1 tekstkontrast (1.4.3), oppfyller du som regel 1.4.11 automatisk. For ikoner på farget bakgrunn: sjekk kontrasten eksplisitt med et kontrastverktøy. |
| 4.1.2 Navn, rolle, verdi | A | Bruk aria-labelledby for å referere til eksisterende synlig tekst. Når ikonets navn allerede finnes som synlig tekst i DOM-en, kan du bruke aria-labelledby i stedet for aria-label for å unngå duplisering. Eksempel: `<ix-icon name="hjem" aria-labelledby="tittel-id"></ix-icon>` |
Håndtert av komponenten (2)
| Kriterium | Nivå | Hva komponenten gjør |
|---|---|---|
| 1.1.1 Ikke-tekstlig innhold | A | Dekorative ikoner settes automatisk aria-hidden="true". Semantiske ikoner med aria-label får role="img" og eksponerer teksten til hjelpemiddelteknologi. |
| 4.1.2 Navn, rolle, verdi | A | Semantiske ikoner (med aria-label eller aria-labelledby) eksponeres med role="img" og tilgjengelig navn. Dekorative ikoner er skjult fra tilgjengelighetstre. Endringer i aria-label og aria-labelledby håndteres reaktivt via observedAttributes. |
Ikke relevant (20)
| Kriterium | Nivå | Hvorfor ikke relevant |
|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | |
| 1.3.2 Meningsfull rekkefølge | A | |
| 1.3.3 Sensoriske egenskaper | A | |
| 1.3.4 Visningsretning | AA | Ingen fast orientering — tilpasser seg visningsretning. |
| 1.4.1 Bruk av farge | A | |
| 1.4.2 Styring av lyd | A | Ingen lydelementer. |
| 1.4.3 Kontrast (minimum) | AA | |
| 1.4.4 Endre tekststørrelse | AA | |
| 1.4.5 Bilder av tekst | AA | Ingen bilder av tekst. |
| 1.4.10 Omflyt | AA | |
| 1.4.12 Tekstavstand | AA | |
| 1.4.13 Innhold ved hover eller fokus | AA | |
| 2.1.1 Tastatur | A | Ikoner er ikke fokuserbare — de er dekorative eller semantiske bilder, ikke interaktive kontroller. |
| 2.1.2 Ingen tastaturfelle | A | |
| 2.4.3 Fokusrekkefølge | A | |
| 2.4.7 Synlig fokus | AA | |
| 2.5.8 Målstørrelse (minimum) | AA | |
| 3.3.1 Identifikasjon av feil | A | |
| 3.3.2 Ledetekster eller instruksjoner | A | |
| 3.3.3 Forslag ved feil | AA |
Props / API
| Prop | Type | Påkrevd | Standard | Beskrivelse |
|---|---|---|---|---|
name | IconName | Nei* | Norsk alias for SpareBank 1-ikoner (hjem, meny, sparing). Gjensidig utelukkende med materialDesignName | |
materialDesignName | string | Nei* | Material Design-ikonnavn (f.eks. "arrow_forward"). Gjensidig utelukkende med name | |
size | 'sm' | 'md' | 'lg' | 'xl' | Nei | 'md' | Størrelse på ikonet |
ariaLabel | string | Nei | Tilgjengelig navn for semantiske ikoner. Når satt: role="img" legges til, aria-hidden fjernes | |
as | ElementType | Nei | 'ix-icon' | HTML-element eller komponent som rendres |
className | string | Nei | Ekstra CSS-klasser |
* Én av name eller materialDesignName må settes.
Tilpasning med CSS
Ikonets farge arves fra omgivende tekst via color: inherit. For å endre farge, sett color på et overordnet element.
Størrelsesstegene er knyttet til typografitokens:
| Størrelse | Token |
|---|---|
sm | --ix-font-size-lg |
md (standard) | --ix-font-size-xl |
lg | --ix-font-size-2xl |
xl | --ix-font-size-3xl |