Gå til hovedinnhold
KOMPONENTER

Ikoner

Ikoner gir visuell kontekst som blir brukt for å representere handlinger og forbedrer brukervennligheten.

Enturs UI-ikoner er funksjonelle ikoner, til bruk i alle Enturs digitale kanaler. Vårt ikonbibliotek er basert på ikoner fra nucleoapp.com. Disse ikonene har Entur lisens til å bruke.

Alle ikoner

Filter

Props

Alle ikoner har støtte for propen inline, som forenkler bruken av ikoner når de skal stå i en tekstlig sammenheng. Dette brukes først og fremst internt i komponenter som bruker komponenter, men anbefales å bruke sammen med knapper og andre komponenter hvor man har behov for et inline ikon.

Se dette ikoner ligger inline med teksten
i motsetning til dette som ligger litt for høyt opp

React Native

Ikoner er også støttet for React Native, ved å importere fra @entur/icons. Props som er støttet er color og size. Det er også lagt inn støtte for width og `height for å sette riktig størrelse på ikoner som ikke er kvadratiske (eks. Ruter-ikonet).

Width og height vil bli prioritert før size om du sender inn begge.

Eksempel:

import { SeatIcon, RuterIcon } from '@entur/icons'

<View>
    <SeatIcon color="181c56" size={ 20 } />
    <RuterIcon color="ffffff" width={ 60 } height={16} />
</View>

Retningslinjer for bruk

Når skal ikoner brukes?

Ikoner skal brukes for å skape bedre navigasjon og brukeropplevelse. De skal oppleves som relevant for de formålene de brukes til, og for å hjelpe brukeren å forstå innholdet raskere enn med kun tekst. Ikoner benyttes oftest sammen med forklarende tekst, og helst ikke frittstående.

Ikoner er ikke ment som dekorasjon, og skal derfor kun brukes der de gir verdi. Ikoner skal ikke være for detaljerte eller blandes i farger, det vil gjøre de mer til en illustrasjon istedenfor et ikon. Ikoner som ikke er en del av ikonbiblioteket skal ikke brukes. Utvikling av nye ikoner skal skje gjennom designansvarlig i Entur.

Prinsipper

Innafor
Bruk samme farge på ikon og tekst når de skal stå sammen
Uttafor
Ikke bruk forskjellige farger på ikon og tekst
Innafor
Når man bruker ikon ved siden av tekst, skal ikonet midtstilles
Uttafor
Ikke baseline-juster ikonet til teksten
Innafor
Størrelsen på både ikon og tekst skal alltid være lik og innenfor størrelse-skalaen
Uttafor
Ikke bruk forskjellig størrelser på ikon og tekst