Bli med å samarbeide om ikoner!
Nav har laget et solid sett med ikoner (800+) som vi anbefaler å bruke og bidra til å videreutvikle. At et ikon har samme betydning i en offentlig sammenheng som en annen tror vi bare har fordeler.
Ikonene støtter justering i størrelse og fargeendringer, og kommer i både stroke og fill-varianter.
Her finner du oversikten over ikoner: aksel.nav.no/ikoner
Her kan du laste ned ikonpakken: cdn.nav.no/aksel/icons
Her finner du NPM-pakken: @navikt/aksel-icons
Her finner du ikonene i Figma: Core Icons 3
For å holde ikonpakken i Figma i sync med nye oppdateringer og justeringer som kommer trenger du en plugin: Aksel Icon plugin.
Installer pluginen, trykk "Run" og du henter ned de siste endringene. Tusen takk til designsystem-teamet i NAV som gjorde dette mulig! 🙏🏻👏🏻🏅
Slik bidrar du
Bli med å bidra her! Følg disse retningslinjene når du lager nye ikoner:
- Bruk Keyline-malen som du finner i Figma-filen under "Assets" Core Icons 3
- Alle lag (selv om det kun er ett) må grupperes i en gruppe, enten union, subtract, intersect, eller exclude.
- Den øverste gruppen skal ha fargen icon.default, alle lag og grupper under dette skal kun bruke #262626
- Alle lag og grupper settes til Constraints: scale, scale
- For ikonvarianten "Stroke": Ikonet må bestå av kun linjer, linjene skal være 1.5 px, center.
- For ikonvarianten "Filled": Ikoner hvor shapes kan fylles, skal fylles.
Tilgjengelighet
Ikonene skal funke for alle brukerene, uansett situasjon. Les mer om hvordan du sikrer tilgjengeligheten når du bruker ikoner og hvilke aria-atributter du bør bruke.