Ikoner gir visuell kontekst som blir brukt for å representere handlinger og forbedrer brukervennligheten.
@import '@entur/icons/dist/styles.css';
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.
Filter
2XLarge
Small
Medium
Large
2XLarge, valgt element, trykk for å fjerne
3XLarge
4XLarge
Align
Arrows
Dots
Entur
Facilities
Fav
Flag
Lock
Partner
Shopping
SocialMedia
Technology
Text
Transport
Travel
UI
Validation
Weather
Zoom
AKTIcon
AccessibilityIcon
AddCardIcon
AddIcon
AdditionalIcon
AdditionalZonesTicketIcon
AdjustmentsIcon
AdminIcon
AgreesIcon
AlignCenterIcon
AlignLeftIcon
AlignRightIcon
AmericanExpressIcon
AnimalFreeIcon
AnimalIcon
AssignToMeFilledIcon
AssignToMeIcon
AtBIcon
AttachmentIcon
BabyIcon
BackArrowIcon
BanknoteIcon
BanknoteMultiIcon
BatteryIcon
BellIcon
BergenBysykkelIcon
BicycleHotelIcon
BicycleIcon
BicycleParkingIcon
BoldIcon
BoltIcon
BookmarkIcon
BrakarIcon
BrakarNoTextIcon
BrightnessIcon
BugIcon
BulletListIcon
BusIcon
BusShelterIcon
CabinIcon
CablewayIcon
CalculatorIcon
CalendarDetailedFilledIcon
CalendarDetailedIcon
CalendarIcon
CameraIcon
CarIcon
CardIcon
CarferryIcon
ChannelsIcon
ChatIcon
CheckFilledIcon
CheckIcon
CheckSmallFilledIcon
CheckSmallIcon
CityBikeIcon
CityIcon
ClockFilledIcon
ClockIcon
CloseFilledIcon
CloseIcon
CloseSmallFilledIcon
CloseSmallIcon
ClosedLockIcon
CloudDownloadIcon
CloudIcon
CloudLightningIcon
CloudRainIcon
CloudSnowIcon
CoffeeIcon
CollapsedIcon
ColorPickerIcon
CommentIcon
CompassNeedleIcon
ConductorIcon
ConfigurationIcon
ContactsIcon
CopyIcon
CorrespondenceIcon
CouchetteIcon
CustomerServiceFilledIcon
CustomerServiceIcon
CutleryIcon
DatabaseIcon
DateIcon
DeleteIcon
DenmarkIcon
DepositionIcon
DesktopIcon
DestinationIcon
DiffIcon
DirectionFilledIcon
DirectionIcon
DownArrowIcon
DownloadIcon
DownwardIcon
DraggableIcon
EditIcon
EmailIcon
EnvironmentIcon
EuroIcon
ExpandIcon
ExtendIcon
ExternalIcon
FacebookIcon
FarteIcon
FeedbackFilledIcon
FeedbackIcon
FerryIcon
FileIcon
FillIcon
FilterFilledIcon
FilterIcon
FlybussenIcon
ForwardIcon
FullIcon
FunicularIcon
GOAIcon
GithubIcon
GoalIcon
GoogleIcon
GridViewIcon
GymIcon
HandToolIcon
HeartIcon
HelicopterIcon
HomeIcon
HorizontalDotsIcon
HykeIcon
ImageIcon
InnlandstrafikkIcon
InstagramIcon
InternationalIcon
InterrailIcon
InvalidTicketIcon
ItalicIcon
KolumbusBysykkelIcon
KolumbusIcon
LanguageFilledIcon
LanguageIcon
LaptopIcon
LeftArrowIcon
LikeIcon
LimeIcon
LinkIcon
LinkedinIcon
ListViewIcon
LoadingIcon
LockerIcon
LogOutIcon
LogoNegativeIcon
LogoPositiveIcon
LostAndFoundFilledIcon
LostAndFoundIcon
LuggageIcon
ManySeatsAvailableIcon
MapFilledIcon
MapIcon
MapPinIcon
MastercardIcon
MeasureFilledIcon
MeasureIcon
MenuIcon
MergeProfilesIcon
MetroIcon
MinimizeIcon
MobileIcon
MobilityIcon
MoneyIcon
MountainIcon
MoveAboutIcon
NewIcon
NightIcon
NorwayIcon
NumberListIcon
OpenedLockIcon
OrganizationIcon
OsloBysykkelIcon
OstfoldIcon
OutlinedValidationCheckIcon
OutlinedValidationErrorIcon
OutlinedValidationExclamationIcon
OutlinedValidationInfoIcon
PackageIcon
ParkAndRideIcon
ParkIcon
ParkingGarageIcon
PhoneIcon
PlaneIcon
PlayIcon
PlaygroundIcon
PlayroomIcon
PositionFilledIcon
PositionIcon
PowerIcon
PremiumSeatIcon
PriceFromIcon
PricelistIcon
PrinterIcon
PrioritySeatPregnantIcon
PrioritySeatSeniorsIcon
PrivacyIcon
PurposeIcon
QRIcon
QuestionIcon
QuietIcon
QuitIcon
RSSIcon
RebateTicketFilledIcon
RebateTicketIcon
RedoIcon
ReferenceIcon
RefreshIcon
ReportsIcon
ResetIcon
RightArrowIcon
RowHeightDefaultIcon
RowHeightMiddleIcon
RowHeightSmallIcon
RulesIcon
RunningIcon
RuterIcon
RuterNoTextIcon
SJIcon
SamiIcon
SaveIcon
ScooterIcon
ScopeIcon
SearchFilledIcon
SearchIcon
SeatIcon
SeatsAvailableIcon
SelectIcon
SendIcon
SettingsIcon
ShareIcon
ShoppingCartIcon
SkiIcon
SkypeIcon
SkyssIcon
SleepIcon
SourceCodeIcon
StandardIcon
StandingAvailableIcon
StandingIcon
StarredIcon
StatsIcon
StrollerIcon
StrollingIcon
SubtractIcon
SubwayIcon
SuitcaseIcon
SunCloudIcon
SunCloudRainIcon
SunIcon
SwedenIcon
SwitchIcon
TVMIcon
TaxiIcon
TerminalFilledIcon
TerminalIcon
TextColorIcon
ThermometerIcon
TierIcon
TimelineIcon
ToFromIcon
ToiletIcon
TrackIcon
TrainCarIcon
TrainIcon
TramIcon
TransferIcon
TrondheimBysykkelIcon
TurnableIcon
TwitterIcon
UKIcon
UmbrellaIcon
UnderlineIcon
UndoIcon
UniversityIcon
UnlinkIcon
UnsortedIcon
UnstarredIcon
UnviewIcon
UpArrowIcon
UploadIcon
UpwardIcon
UserIcon
UsersIcon
VKTIcon
ValidTicketFilledIcon
ValidTicketIcon
ValidationCheckIcon
ValidationErrorIcon
ValidationExclamationIcon
ValidationInfoIcon
ValueIcon
VendingMachineIcon
VerticalDotsIcon
VerticalSwitchIcon
ViewIcon
VimeoIcon
VippsIcon
VippsLogoIcon
VisaIcon
VoiIcon
VyIcon
WaitingRoomIcon
WalkIcon
WalkingIcon
WarningIcon
WaterTapIcon
WheelchairIcon
WifiIcon
WindIcon
YoutubeIcon
ZoneIcon
ZoomInIcon
ZoomOutIcon
ZvippIcon
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.
Kontrast
Vis kode
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.
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