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
Kode
<Icon name="hjem" />
Eksempler
Størrelser
Kode
<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:
Kode
<Icon name="hjem" ariaLabel="Gå til forsiden" />
Badge
Sett data-badge for å vise ikonet som en glyf på en farget sirkel. Selve elementet blir sirkelen, og glyfen tegnes oppå. Standardstørrelsen er 32 px. Glyfen bruker den inverse forgrunnsfargen. Setter du i tillegg data-status, bruker sirkelen statusfargen automatisk (--ix-color-status-fill kobles av data-status). Brukes blant annet av statusikonet i Message.
Kode
<HStack alignItems="center"> <Icon name="info" data-badge data-status="info" /> <Icon name="hake" data-badge data-status="success" /> <Icon name="utropstegn" data-badge data-status="warning" /> <Icon name="utropstegn" data-badge data-status="danger" /> </HStack>
Badge-glyfen er dekorativ på samme måte som ellers — bruk aria-label kun når den formidler informasjon uten tilstøtende tekst.
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 | |
data-badge | boolean | Nei | Viser ikonet som en glyf på en farget sirkel (badge). Settes som attributt og videresendes til <ix-icon> | |
as | ElementType | Nei | 'ix-icon' | HTML-element eller komponent som rendres |
className | string | Nei | Ekstra CSS-klasser |
* Én av name eller materialDesignName må settes.
Unngå "blink" før web componenten laster
Ikonet tegnes av CSS via mask-image: var(--ii-icon-url). Det er web componenten som setter --ii-icon-url i sin connectedCallback. Frem til den kjører er variabelen ikke satt, og CSS faller tilbake til en gjennomsiktig maske — ikonet er da usynlig, ikke en farget boks.
I React har dette ingen praktisk betydning: web componenten er allerede lastet når komponentene rendres. Men i ren HTML uten rammeverk — særlig sider som vises før indeks-web-scriptet er ferdig lastet fra CDN — kan ikonet blinke inn et lite øyeblikk etterpå.
Du kan fjerne blinket helt ved å sette --ii-icon-url inline selv. Da tegnes ikonet umiddelbart, og web componenten overtar variabelen (og legger til aria) når den laster:
Kode
<ix-icon name="hjem" style="--ii-icon-url: url('https://cdn.sparebank1.no/icons/home.svg')" ></ix-icon>
--ii-icon-url er en intern variabel (--ii--prefiks). Den er ikke et offisielt API og kan i teorien endres. Bruk dette kun som en bevisst optimalisering for ikke-React-sider der blinket er et problem — for name-aliaser må du selv slå opp Material Design-filnavnet (f.eks. hjem → home.svg), mens materialdesignname-verdien er filnavnet direkte.
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 |
Badge
Med data-badge styres badgen av disse variablene:
| Variabel | Standard | Beskrivelse |
|---|---|---|
--ix-icon-badge-background | currentColor | Sirkelens farge. Settes automatisk til --ix-color-status-fill når data-status er på elementet |
--ix-icon-badge-foreground | --ix-color-foreground-inverse-default | Glyfens farge |
--ix-icon-badge-size | 32px | Sirkelens diameter |
--ix-icon-badge-glyph-size | --ix-font-size-lg | Glyfens størrelse |