Ikoner i Jøkul

Jøkul leveres med et komplett ikonsett basert på Material Symbols. Lær hvordan du bruker dem riktig.

Kategori: Utvikling
Publisert: 06.03.2026
Lesetid: 2 min.

Vi hadde en gang et ikon som skulle bety "last ned dokument". Det var et rektangel med en pil ned. Perfekt. Problemet var at det samme ikonet ble brukt for "lagre", "eksportere" og "arkivere" i tre forskjellige deler av appen. Brukertestingen var pinlig. Det lærte oss noe viktig: ikoner er ikke dekorasjon. De er kommunikasjon. Og kommunikasjon krever konsistens.

Hvorfor Material Symbols?

Vi vurderte å designe et eget ikonsett. Det ville gitt oss full kontroll, men også full vedlikeholdsbyrde for over tusen ikoner. Material Symbols fra Google gir oss et komplett, gjennomtenkt sett som fungerer på alle plattformer — og vi har tilpasset standardverdiene til Fremtinds profil.

Material Symbols er en variabel font med fire justerbare akser. Jøkul setter standardverdier som passer Fremtinds profil, men du kan overstyre per ikon.

De fire aksene du bør kjenne

wght — Tykkelse (100–700): Jøkul bruker 400 som standard. Lavere = tynnere streker. Bruk 300 for dekorative ikoner i store størrelser.
opsz — Optisk størrelse (20–48): Høyere verdi = tynnere detaljer for store ikoner. Lavere = bedre lesbarhet i liten størrelse. Sett lik faktisk pikselstørrelse.
GRAD — Gradering (-25 til 200): Påvirker visuell vekt uten å endre fotavtrykket. Nyttig for hover-effekter der du vil gi mer "oomph".
FILL — Fylling (0 eller 1): 0 = outline (standardtilstand), 1 = fylt (aktiv tilstand). Bruk dette til å kommunisere om noe er valgt eller favorittmerket.

Dekorativt vs. funksjonelt ikon — et kritisk skille

Dette er der de fleste gjør det feil. Hvert ikon er enten dekorativt (støtter tekst) eller funksjonelt (kommuniserer selvstendig). Feil håndtering gir et forferdelig skjermleseropplevelse:

Dekorativt ikon ved siden av tekst: aria-hidden="true" — skjermleseren skal ikke lese det.
Funksjonelt ikon uten tekst (f.eks. lukkknapp): aria-label="Lukk dialog" på knappen.
Informativt ikon som statusindikator: legg til visuelt skjult tekst med jkl-sr-only-klassen.

24px — standard UI20px — kompakt/inline32px — fremhevetOutline — standardtilstandFilled — aktiv tilstand

Kom i gang

Installer pakken: npm install @fremtind/jokul/icon
Importer CSS: import "@fremtind/jokul/icon/icon.css"
Importer komponenten: import { Icon } from "@fremtind/jokul/icon"
Bruk med ikonnavnet: <Icon name="home" />

Når du trenger et ikon som ikke finnes

Material Symbols har over 2500 ikoner. Men noen ganger finnes ikke akkurat det du trenger. Slik håndterer vi egendefinerte SVG-ikoner:

SVG på 24×24px viewport med 2px padding (20px synlig)
fill="currentColor" slik at fargen arves fra CSS
Godkjent av designteamet og dokumentert i Storybook
Testet i begge temaer og alle relevante størrelser

Aldri kopier SVG-ikoner mellom applikasjoner. Legg dem i et delt komponentbibliotek. Jeg har sett det samme ikonet eksistere i fem ulike versjoner i fem repos. Det er vedlikeholdsmarerittet vi prøver å unngå.

Gode ikoner er usynlige i den forstand at de aldri skaper forvirring. Brukeren bare forstår. Dårlige ikoner er usynlige fordi ingen har tenkt på dem i det hele tatt — og det merker brukeren.