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 Button med
aria-labelrundt ikonet
Bruk
Eksempler
Størrelser
Semantisk ikon
Bruk ariaLabel når ikonet formidler informasjon som ikke er tilgjengelig andre steder:
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.
Badge-glyfen er dekorativ på samme måte som ellers — bruk aria-label kun når den formidler informasjon uten tilstøtende tekst.
Retningslinjer
Sett ikonet sammen med tekst
Et ikon alene betyr det leseren tror det betyr. Med synlig tekst ved siden av trenger ingen å kjenne symbolet fra før.
Merk bare ikonet som står alene
ariaLabel er for ikoner som bærer informasjon uten tekst rundt seg, som et varselsikon som
er eneste tegn på at noe er feil. Står ikonet ved siden av tekst som allerede sier det samme,
er det dekorativt og skal ikke merkes. I en knapp eller lenke hører labelen på det
interaktive elementet, ikke på ikonet. To labels leses opp som to ting.
Ikke la fargen bære meningen
Formen må si det samme som fargen. Et rødt og et grønt ikon med samme silhuett er identiske for den som ser dem i grått.
Velg størrelse etter kontekst
sm til kompakt UI som etiketter og tags. md (standard) ved siden av tekst i løpende
innhold. lg og xl til frittstående ikoner, navigasjon og illustrasjon.
Unngå blink før web componenten laster
Ikonet tegnes av CSS via mask-image: var(--ii-icon-url), og det er web componenten som setter
--ii-icon-url i sin connectedCallback. Frem til den kjører er variabelen usatt, og CSS faller
tilbake til en gjennomsiktig maske. Ikonet er altså usynlig, ikke en farget boks.
I React merker du ingenting: web componenten er lastet før komponentene rendres. I ren HTML kan
ikonet blinke inn et øyeblikk etterpå, særlig på sider som vises før indeks-web-scriptet er
ferdig lastet fra CDN.
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:
--ii-icon-url er en intern variabelPrefikset --ii- betyr internt. Variabelen er ikke et offisielt API og kan endres uten varsel, så bruk dette bare som en bevisst optimalisering for ikke-React-sider der blinket er et problem. name er Material Design-filnavnet direkte, så URL-en er .../{name}.svg (f.eks. home → home.svg).
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="savings" 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="home"></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="home"></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="home" 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 | Ja | Material Design-ikonnavn (f.eks. "home", "arrow_forward"). Vanlige SB1-ikoner autofullføres; alle andre MD-navn godtas også | |
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 |
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 |