Vi lanserer ny ikonpakke med 800+ ikoner

Nytt uttrykk

Det nye designet på ikonene våre er mer moderne, med avrundede hjørner. Her kunne vi skrevet mye om metaforene vi kan dra fra et mykere sett ikoner til et mykere møte med brukerne, men vi tror dere skjønner tegninga.

Over 190 nye ikoner

Vi har fått mange henvendelser om nye ikoner, både i og utenfor NAV. Det har vært vanskelig å prioritere å lage noe nytt når vi ikke var fornøyde med det som eksisterte. Nå når vi endelig har fått tegna alle de eksisterende ikonene på nytt har vi også fått muligheten til å legge til en hel haug med flere ikoner.

Mange av de ikonene er laget for å dekke hull i pakka, som for eksempel flere transportmiddel, flere typer ikoner for statistikk, mediekontroll, filtyper og piler.

I tillegg har vi lagt til ikoner som er spesifikke mot utvikling og grensesnitt. Dette er hovedkategorier av ikoner, hvor eksempler på underkategorier inkluderer distribusjon, nettverk, manipulasjon av grensesnitt og design.

Bedre støtte for skalering

Vi så at mange team velger å skalere ikonene opp og ned i grensesnittene de lager. Dette kunne fort gå på bekostning av helheten i designet fordi ikonene ble veldig dominerende.

De nye ikonene er tegnet med smalere linjer. På denne måten kan teamene enklere skalere ikonene opp og ned, uten at vektingen mot tekst blir verre enn ved standard skalering.

Bedre støtte for fargevalg i Figma

Figma er et verktøy vi aldri slutter å lære oss. Spesielt når det kommer til hvor ømfientlig det er for endringer på komponenter. Mange ganger tar systemet med seg endringene, men litt for ofte går det ikke helt som planlagt.

Med de nye ikonene har vi jobbet for å støtte fargeendringene designerne gjør på en bedre måte. Vi håper dette fungerer som tenkt, og tar gjerne tilbakemeldinger på dette, som med alt annet.

Utviklerne har vært heldigere enn designerne en stund, fordi vi har egne semantiske farger for ikonene våre.

Endringer på statusikonene

Statusikonene våre er de viktigste ikonene vi har. Derfor håper vi at dere vil sende hurtige tilbakemeldinger på endringene vi har gjort. Så hva er endringene?

Unike former på statusene

En av de viktigste funksjonene til statusikoner er nødvendigvis oversikten de gir ved et raskt øyekast. For å støtte under dette har vi introdusert unike former på hvert ikon.

Slutt på fargede ikoner

Sammen med lanseringa av bedre tokensystem, og nå bedre ikonpakke, håper vi at det blir enkelt å velge farger fra våre design tokens. Vi ser ikke på det som hensiktsmessig å ha en pakke hvor akkurat statusikonene kommer ferdig fargelagt.

Nye statusikoner

Vi introduserer også egne ikoner for "blokkert" (CircleSlash), som typisk brukes der en bruker ikke kan gjøre endringer, eller ikke har tilgang. I tillegg legger vi til et eget ikon for "hjelp" (QuestionmarkDiamond), som brukes for å vise hjelpemeldinger.

Bedre utvikleropplevelse

Mange konsumerer i dag ikonene våre gjennom kodepakken `@navikt/ds-icons`, og erfaringene våre etter publisering i 2021 frem til nå er at løsningen fungerte ganske greit. Vi ville gjøre ting enklest mulig for adoptering av de nye ikonene, så vi publiserte en ny ikonpakke `@navikt/aksel-icons` 🎉 Ingen breaking changes og API-et er det samme. Alle ikoner har nå også `Icon` på slutten av navnet slik at import og lesbarhet blir enklere.

Vi valgte også å fjerne React fra `peerDependencies`, slik at løsninger i frameworks som f.eks. Vue og Svelte skal kunne bruke SVG-ikonene. Vi ønsker gjerne å høre om noen

Tusen takk til teamene

Vi kunne ikke gjort alle disse tingene uten et engasjert miljø av teknologer. Særlig stor takk til dere som har sendt tilbakemeldinger gjennom nettsiden inn i GitHub. Det har gjort det enkelt for oss å holde kontakten, og vurdere behovene på en enkel måte.

Hold praten gående i den nye løsningen også, så blir vi ekstremt glad ❤️