Ikonografi

Uppdaterad 2026-06-16

Ikoner är ett jättebra sätt att göra saker enklare – både för att informera och vägleda. Vår ikonografi är utformad för att göra innehåll härligt och enkelt att förstå.

Ikoner är ett universellt språk som kompletterar det skrivna ordet och guidar mottagaren rätt eller förhöjer och förstärker ett budskap.

SJ har ett stort behov av att vägleda människor i en mängd olika situationer; i digitala kanaler, i fysiska miljöer och i tryckt information. För att ta hand om dessa behov har SJs ikonografi tagits fram. Ikonografin är nära kompis till typografin och har ett mänskligt och trevligt uttryck.

Denna guide skall följas oavsett vilket användningsområde ikonen skall ha. Detta skapar ett konsekvent och enkelt uttryck på alla ytor där vi möter våra kunder.

Koncept

SJs ikoner bygger på rörelse och resan – från en punkt till en annan. Detta ger en unik karaktär, skapar rörelse och ger en tydlig koppling till tågresan. Enkelt men samtidigt bearbetat. Ikoner startar alltid ”resan” med ett rakt streck, går sedan medurs och slutar med ett rundat avslut.

Användningsområden

Våra ikoner finns i tre olika nivåer för att fylla våra olika behov. Vanliga ikoner finns i två nivåer, en normal som går att skala upp och ikoner mini som är en förenklad variant av ikoner och som enbart skall används i små storlekar i digitala applikationer så som platskarta.

Som komplement till ikoner finns våra illustrationsikoner som är mer kommunikativa och dekorativa ikoner. Dessa används främst i större storlekar i kombination med text och kan till exempel illustrera ett budskap eller ett empty state i appen.

Ikoner mini

Ikoner

Illustrationsikoner

Ikoner

Deskriptiva eller informativa ikoner för att kommunicera vilken service som finns ombord på tåget eller för att guida och interageras med. Ikonerna bör vara enkla i sin karaktär och kommer i vissa fall förekomma utan någon beskrivande text. De behöver därför vara självförklarande och tydliga för kunden. De ritas i ett 24 x 24 pixlar stort grid för att fungera i små storlekar och vid behov av större ikoner kan de skalas upp.

Ikoner mini

Ikoner mini är en förenklad variant av ikoner som enbart används i små storlekar i digitala applikationer så som platskarta eller bokningsvy för att kommunicera vilken service som finns ombord på tåget. De ritas i ett 20 x 20 pixlar stort grid för att fungera i extra små storlekar och bör ej skalas upp.

Ikoner ombord

Ikoner som används för skyltning ombord och exteriört på tågen är i de flesta fall identiska med övriga ikoner. Det finns dock vissa undantag som exempelvis Bistro. Dessa ikoner kan även användas i andra sammanhang som vid events och i utskick.

På tågen finns dessutom ett antal ikoner som är kopplade till ombordmiljön, till exempel Ej dricksvatten.

Illustrationsikoner

Illustrationsikoner är mer kommunikativa och dekorativa. De används i stora storlekar i kombination med text och kan illustrera ett budskap eller ett empty state i appen. De har som huvudsyfte att göra information roligare och ritas i ett större och friare grid om 96 x 96 pixlar, vilket gör att de kan vara både mer komplexa och detaljerade.

Konstruktion av ikoner

När vi tar fram nya ikoner utgår vi från tre olika rutnät. Det minsta rutnätet är 20 x 20 px och gäller för ikoner mini. Det mellersta rutnätet är 24 x 24 px och används för ikoner. Det största rutnätet är 96 x 96 px och används för illustrationsikoner.

Varje rutnät har en ”padding” och en ”live area”. Ikoner bör hålla sig inuti ”live area”, men om motivet kräver det kan innehållet sträcka sig in i paddingen. Inga delar av ikonen får gå utanför rutnätet.

Ikoner mini ritas i ett 20 x 20 pixlar stort grid med 2 pixlars padding. Live area på 16 x 16 pixlar.

Ikoner ritas i ett 24 x 24 pixlar stort grid med 2 pixlars padding. Live area på 20 x 20 pixlar.

Illustrationsikoner ritas i ett 96 x 96 pixlar stort grid med 4 pixlars padding. Live area på 88 x 88 pixlar.

Tjocklek, hörn och avslut för linjer

För att skapa ett sammanhållet uttryck ritar vi våra ikoner i vissa specifika linjetjocklekar och med konsekventa hörnavrundningar.

Pixelperfekt

För att ikonerna ska se skarpa ut på skärm eller undvika att ikonerna förvrängs är det viktigt att rita dem ”pixelperfekt” på rutnätet.

Vinklar, proportioner och geometri

Rutnätet innehåller tydliga regler för en konsekvent positionering av grafiska element. Genom att följa dessa riktlinjer och geometriska mallar bibehåller vi konsekventa visuella proportioner för alla ikoner.

Linjetjocklek

För att de olika ikonerna ska kännas harmoniska ihop, med konsekvent linjetjocklek i förhållande till motiv och till varandra, är det viktigt att tänka på hur man placerar dem.

Ikoner mini är enkla att hantera då de enbart används på specifika ställen i SJs app och ej bör skalas upp. Ikoner däremot, är flexibla och skalbara och kan vara stora eller små beroende på behov, medan illustrationsikoner är avsedda för lite större storlekar, både digitalt och i tryck. I mindre format kommer en illustrationsikon att upplevas grötig, med för små mellanrum mellan linjerna.

Ikoner och illustrationsikoner bör aldrig placeras ihop i samma storlek. Sträva efter att inte ha dem på samma yta eller ens i närheten av varandra. Om det inte kan undvikas, se till att det finns en väsentlig storleksskillnad. Titta på linjerna och anpassa storleksskillnaden tills de upplevs lika tjocka.

Animering av ikoner

Genom att animera våra ikoner kan vi göra dem både tydligare och samtidigt förstärka det härliga och enkla. Animeringarna kan göras på tre sätt; en rörelse som visas en gång, en rörelse som pågår hela tiden eller en rörelse som aktiveras när man interagerar med ikonen.

Tillåtna färgkombinationer

Då vi strävar efter hög läsbarhet i allt vi gör är det viktigt att välja förgrundsfärger som skapar god kontrast mot bakgrunden.

Meningsbärande grafik såsom ikoner och diagram måste ha ett kontrastvärde på minst 3:1.
Stor text måste ha ett kontrastvärde på minst 3:1. Stor text är 18 punkter (24 pixlar) och större, eller 14 punkter (19 pixlar) och större om den är i fetstil.
Vanlig text måste ha ett kontrastvärde på minst 4,5:1. Vanlig text är mindre än 18 punkter (24 pixlar), och mindre än 14 punkter (19 pixlar) om den är i fetstil.