Ikonbibliotek

Sikt designsystem bruker ikoner fra Phosphor icons. Ikonene er open-source, og lisensiert under MIT. I Sikt designsystem bruker vi et utvalg av Phosphor-ikonene. Merk at ikonenes retningslinjer fremdeles er under arbeid, så kom gjerne med tilbakemelding på hva som funger og ikke funker.

Utvalg

Phosphor icons har et svært bredt utvalg ikoner, der mange av ikonene kan brukes i samme kontekst. I Sikt designsystem har vi begrenset utvalget, ettersom vi tror det er lettere å ha en felles forståelse av bruken dersom det er et mindre utvalg ikoner. Tanken er å utvide utvalget av ikoner ved behov. Disse behovene bør komme direkte fra produkt-teamene, basert på reelle problemstillinger. I Figma har man per idag tilgang på alle Phosphor-ikonene, mens man i NPM-pakkene kun har tilgang på Sikt sitt ikonbibliotek.

Utvidelse

Dersom det oppstår behov for å inkludere flere ikoner i ikonbiblioteket til Sikt vil vi gjerne ha tilbakemelding på dette, slik at vi kan utvide utvalget. Dette kan enten være i form av å legge til flere av de eksisterende Phosphor-ikonene, eller å designe nye ikoner fra bunnen av. Det vil kunne oppstå behov som er spesifikke for et enkelt produkt, men i utgangspunktet tror vi det mest gunstige er et sentralt ikonbibliotek alle kan benytte seg av.

Konsistent bruk

For å sørge for en helhetlig brukeropplevelse på tvers av Sikt sine tjenester/flater er det ønskelig med konsistent bruk av ikoner. Det vil si at samme brukskontekst bør bruke samme ikon. Som eksempel bør en tidsfrist indikeres ved bjelle-ikonet (deadline), og ikke ved f.eks klokke-ikonet (time). For å understøtte konsekvent bruk har hvert ikon et navn som beskriver den tenkte brukskonteksten.

Alternative ikoner

I ikonbiblioteket vil du se at enkelte brukskontekster har flere alternative ikoner. Her kan man selv avgjøre hva som passer best i det aktuelle brukergrensesnittet.

Farge

Ikonene bruker samme fargepalett som tekst, med samme betydning av fargene. Dette vil sørge for at ikon-fargen støtter UU-krav på lik linje som tekst-fargen. Se Farger for mer informasjon. Unntaket er offisielle tredjepartsikoner der det finnes retningslinjer for bruk av merkevaren (f.eks LinkedIn logo). Her kan det kun brukes et mer begrenset fargeutvalg. Som regel vil hvit (#FFFFFF), sort (#000000), og merkevarefargen (f.eks LinkedIn mørkeblå) være aktuelle farger å bruke her.

Fyll

Enkelte ikoner finnes også med fyll (fill), slik at man kan bruke ikonet som en knapp der omriss (outline) endres til fyll når den er trykket på. Eksempel på bruk kan være å lagre noe med bokmerke-ikonet (bookmark). Logikken for dette på kodesiden må i utgangspunktet det enkelte team stå for. Det er ikke ønskelig å bruke fyll-ikoner som standard.

Størrelse og skalering

Størrelsen på ikonet bør ses i sammenheng med linjehøyden på teksten som ligger før/etter ikonet. Dersom ikonet ikke skal ses i sammenheng med tekst blir det en skjønnsmessig vurdering. Ikonene er satt opp slik at linjetykkelsen vil bli større i takt med at ikonet skaleres opp.

Ikonbiblioteket