Icons

npm install @entur/icons

@import '@entur/icons/dist/styles.css';

Søk etter et ikon

Bruk

Enturs UI-ikoner er funksjonelle ikoner, til bruk i alle Enturs digitale kanaler. Alle ikonene er laget på huset – ta kontakt på #talk-designsystem hvis det mangler et ikon du trenger.

inline

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.

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

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

Bruk samme farge på ikon og tekst når de skal stå sammen

Ikke bruk forskjellige farger på ikon og tekst

Når man bruker ikon ved siden av tekst, skal ikonet midtstilles

Ikke baseline-juster ikonet til teksten

Størrelsen på både ikon og tekst skal alltid være lik og innenfor størrelse-skalaen

Ikke bruk forskjellig størrelser på ikon og tekst