- Munich
- Berlin
- London
- New York City
- Nuremberg
- Regensburg
- Salzburg
You can have a look at the styles here: schaechinger.com/projects/transportkit.
First clone the repository to your machine:
git clone https://github.com/schaechinger/transportkit.git
cd transportkitThe SASS are located in the sass folder, separated in transport types.
To build the project run:
npm i
npm run buildThe current versions in CSS format are located in the styles folder after the build.
Each supported city has it's own file if you only want to use styles for one city.
If you cloned the repository and edited the SASS files make sure you build the project first.
The format is as followed: transportkit-{city} transportkit-{city}--{line}
To enable dark / contrast mode, add the following class: transportkit-{city}--contrast
| Line | HTML Class | Preview |
|---|---|---|
| Munich | ||
| U-Bahn | ||
| Generic U-Bahn | transportkit-munich--u |
 |
| U1 | transportkit-munich--u1 |
 |
| U2 | transportkit-munich--u2 |
 |
| U3 | transportkit-munich--u3 |
 |
| U4 | transportkit-munich--u4 |
 |
| U5 | transportkit-munich--u5 |
 |
| U6 | transportkit-munich--u6 |
 |
| U7 | transportkit-munich--u7 |
 |
| U8 | transportkit-munich--u8 |
 |
| S-Bahn | ||
| Generic S-Bahn | transportkit-munich--s |
 |
| S1 | transportkit-munich--s1 |
 |
| S2 | transportkit-munich--s2 |
 |
| S3 | transportkit-munich--s3 |
 |
| S4 | transportkit-munich--s4 |
 |
| S6 | transportkit-munich--s6 |
 |
| S7 | transportkit-munich--s7 |
 |
| S8 | transportkit-munich--s8 |
 |
| S20 | transportkit-munich--s20 |
 |
| Bus | ||
| Generic city bus | transportkit-munich--btransportkit-munich--bus |
 |
| Generic metro bus | transportkit-munich--bmtransportkit-munich--busmtransportkit-munich--bus-metro |
 |
| Generic express bus | transportkit-munich--bxtransportkit-munich--busxtransportkit-munich--bus-express |
 |
| Generic night bus | transportkit-munich--bntransportkit-munich--busn |
 |
| Generic weekend-only night bus |
transportkit-munich--bnwtransportkit-munich--busnwtransportkit-munich--bus-night-weekend |
 |
| Tram | ||
| Generic tram | transportkit-munich--ttransportkit-munich--tram |
 |
| Generic peak time tram | transportkit-munich--tptransportkit-munich--tram-peak |
 |
| Tram 12 | transportkit-munich--t12 |
 |
| Tram 15 | transportkit-munich--t15 |
 |
| Tram 16 | transportkit-munich--t16 |
 |
| Tram 17 Tram N17 |
transportkit-munich--t17transportkit-munich--tn17 |
  |
| Tram 18 | transportkit-munich--t18 |
 |
| Tram 19 Tram N19 |
transportkit-munich--t19transportkit-munich--tn19 |
  |
| Tram 20 Tram N20 |
transportkit-munich--t20transportkit-munich--tn20 |
  |
| Tram 21 | transportkit-munich--t21 |
 |
| Tram 22 | transportkit-munich--t22 |
 |
| Tram 23 | transportkit-munich--t23 |
 |
| Tram 25 | transportkit-munich--t25 |
 |
| Tram 27 Tram N27 |
transportkit-munich--t27transportkit-munich--tn27 |
  |
| Tram 28 | transportkit-munich--t28 |
 |
| Berlin | ||
| U-Bahn | ||
| Generic U-Bahn | transportkit-berlin--u |
 |
| U1 | transportkit-berlin--u1 |
 |
| U2 | transportkit-berlin--u2 |
 |
| U3 | transportkit-berlin--u3 |
 |
| U4 | transportkit-berlin--u4 |
 |
| U5 U55 |
transportkit-berlin--u5transportkit-berlin--u55 |
  |
| U6 | transportkit-berlin--u6 |
 |
| U7 | transportkit-berlin--u7 |
 |
| U8 | transportkit-berlin--u8 |
 |
| U9 | transportkit-berlin--u9 |
 |
| S-Bahn | ||
| Generic S-Bahn | transportkit-berlin--s |
 |
| S1 | transportkit-berlin--s1 |
 |
| S2 S25 S26 |
transportkit-berlin--s2transportkit-berlin--s25transportkit-berlin--s26 |
   |
| S3 | transportkit-berlin--s3 |
 |
| S41 S45 |
transportkit-berlin--s41transportkit-berlin--s45 |
  |
| S42 | transportkit-berlin--s42 |
 |
| S46 S47 |
transportkit-berlin--s46transportkit-berlin--s47 |
  |
| S5 | transportkit-berlin--s5 |
 |
| S7 S75 |
transportkit-berlin--s7transportkit-berlin--s75 |
  |
| S8 S85 |
transportkit-berlin--s8transportkit-berlin--s85 |
  |
| S9 | transportkit-berlin--s9 |
 |
| London | ||
| Tube | ||
| Bakerloo | transportkit-london--bakerloo |
 |
| Central | transportkit-london--central |
 |
| Circle | transportkit-london--circle |
 |
| District | transportkit-london--district |
 |
| Hammersmith & City | transportkit-london--hammersmith |
 |
| Jubilee | transportkit-london--jubilee |
 |
| Metropolitan | transportkit-london--metropolitan |
 |
| Northern | transportkit-london--northern |
 |
| Piccadilly | transportkit-london--piccadilly |
 |
| Victoria | transportkit-london--victoria |
 |
| Waterloo & City | transportkit-london--waterloo |
 |
| Overgrounds | ||
| Overground | transportkit-london--overground |
 |
| TfL Rail | transportkit-london--tflrail |
 |
| DLR | transportkit-london--dlr |
 |
| Tram | transportkit-london--ttransportkit-london--tram |
 |
| Bus & River Bus | ||
| Generic bus | transportkit-london--btransportkit-london--bus |
 |
| Woolrich Ferry | transportkit-london--rbwoolwich |
 |
| RB1 | transportkit-london--rb1 |
 |
| RB1X | transportkit-london--rb1x |
 |
| RB2 | transportkit-london--rb2 |
 |
| RB4 | transportkit-london--rb4 |
 |
| RB5 | transportkit-london--rb5 |
 |
| RB6 | transportkit-london--rb6 |
 |
| Air Line | ||
| Emirates Air Line | transportkit-london--aemirates |
 |
| New York City | ||
| Subway | ||
| 1 2 3 |
transportkit-nyc--1transportkit-nyc--2transportkit-nyc--3 |
   |
| 4 5 6 6d |
transportkit-nyc--4transportkit-nyc--5transportkit-nyc--6transportkit-nyc--6d |
    |
| 7 7d |
transportkit-nyc--7transportkit-nyc-7d |
  |
| A C E |
transportkit-nyc--atransportkit-nyc--ctransportkit-nyc--e |
   |
| B D F M |
transportkit-nyc--btransportkit-nyc--dtransportkit-nyc--ftransportkit-nyc--m |
    |
| G | transportkit-nyc--g |
 |
| J Z |
transportkit-nyc--jtransportkit-nyc--z |
  |
| L | transportkit-nyc--l |
 |
| S | transportkit-nyc--s |
 |
| N Q R W |
transportkit-nyc--ntransportkit-nyc--qtransportkit-nyc--rtransportkit-nyc--w |
    |
| Nuremberg | ||
| U-Bahn | ||
| Generic U-Bahn | transportkit-nuremberg--u |
 |
| U1 | transportkit-nuremberg--u1 |
 |
| U2 | transportkit-nuremberg--u2 |
 |
| U3 | transportkit-nuremberg--u3 |
 |
| S-Bahn | ||
| Generic S-Bahn | transportkit-nuremberg--s |
 |
| S1 | transportkit-nuremberg--s1 |
 |
| S2 | transportkit-nuremberg--s2 |
 |
| S3 | transportkit-nuremberg--s3 |
 |
| S4 | transportkit-nuremberg--s4 |
 |
| Tram | ||
| Generic Tram 4 |
transportkit-nuremberg--ttransportkit-nuremberg--t4 |
 |
| 5 | transportkit-nuremberg--t5 |
 |
| 6 | transportkit-nuremberg--t6 |
 |
| 7 | transportkit-nuremberg--t7 |
 |
| 8 | transportkit-nuremberg--t8 |
 |
| R-Bahn | ||
| Generic R-Bahn R 1 |
transportkit-nuremberg--rtransportkit-nuremberg--r1 |
 |
| R 11 | transportkit-nuremberg--r11 |
 |
| R 12 | transportkit-nuremberg--r12 |
 |
| R 2 | transportkit-nuremberg--r2 |
 |
| R 21 | transportkit-nuremberg--r21 |
 |
| R 3 | transportkit-nuremberg--r3 |
 |
| R 31 | transportkit-nuremberg--r31 |
 |
| R 4 | transportkit-nuremberg--r4 |
 |
| R 5 | transportkit-nuremberg--r5 |
 |
| R 6 | transportkit-nuremberg--r6 |
 |
| R 7 | transportkit-nuremberg--r7 |
 |
| R 9 | transportkit-nuremberg--r9 |
 |
| Regensburg | ||
| Bus | ||
| Generic bus | transportkit-regensburg--btransportkit-regensburg--bus |
 |
| Generic suburb bus | transportkit-regensburg--bsubtransportkit-regensburg--bus-suburb |
 |
| A | transportkit-regensburg--ba |
 |
| X4 | transportkit-regensburg--bx4 |
 |
| X9 | transportkit-regensburg--bx9 |
 |
| 1 | transportkit-regensburg--b1 |
 |
| 2 | transportkit-regensburg--b2 |
 |
| 3 | transportkit-regensburg--b3 |
 |
| 4 4A |
transportkit-regensburg--b4transportkit-regensburg--b4a |
  |
| 5 5A |
transportkit-regensburg--b5transportkit-regensburg--b5a |
  |
| 6 | transportkit-regensburg--b6 |
 |
| 7 | transportkit-regensburg--b7 |
 |
| 8 8A 8B |
transportkit-regensburg--b8transportkit-regensburg--b8atransportkit-regensburg--b8b |
   |
| 9 | transportkit-regensburg--b9 |
 |
| 10 | transportkit-regensburg--b10 |
 |
| 11 11A |
transportkit-regensburg--b11transportkit-regensburg--b11a |
  |
| 12 | transportkit-regensburg--b12 |
 |
| 13 | transportkit-regensburg--b13 |
 |
| 14 | transportkit-regensburg--b14 |
 |
| 15 | transportkit-regensburg--b15 |
 |
| 16 | transportkit-regensburg--b16 |
 |
| 17 | transportkit-regensburg--b17 |
 |
| 18 | transportkit-regensburg--b18 |
 |
| 20 | transportkit-regensburg--b20 |
 |
| 21 | transportkit-regensburg--b21 |
 |
| 23 | transportkit-regensburg--b23 |
 |
| 24 | transportkit-regensburg--b24 |
 |
| 28 | transportkit-regensburg--b28 |
 |
| 30 31 |
transportkit-regensburg--b30transportkit-regensburg--b31 |
  |
| 32 | transportkit-regensburg--b32 |
 |
| 33 | transportkit-regensburg--b33 |
 |
| 34 | transportkit-regensburg--b34 |
 |
| 41 | transportkit-regensburg--b41 |
 |
| 77 | transportkit-regensburg--b77 |
 |
| 78 | transportkit-regensburg--b78 |
 |
| Salzburg | ||
| O-Bus | ||
| 1 | transportkit-salzburg--o1 |
 |
| 2 | transportkit-salzburg--o2 |
 |
| 3 | transportkit-salzburg--o3 |
 |
| 4 | transportkit-salzburg--o4 |
 |
| 5 | transportkit-salzburg--o5 |
 |
| 6 | transportkit-salzburg--o6 |
 |
| 7 | transportkit-salzburg--o7 |
 |
| 8 | transportkit-salzburg--o8 |
 |
| 9 | transportkit-salzburg--o9 |
 |
| 10 | transportkit-salzburg--o10 |
 |
| 12 | transportkit-salzburg--o12 |
 |
| 14 | transportkit-salzburg--o14 |
 |
| S-Bahn | ||
| S1 | transportkit-salzburg--s1 |
 |
| S2 | transportkit-salzburg--s2 |
 |
| S3 | transportkit-salzburg--s3 |
 |
| S4 | transportkit-salzburg--s4 |
 |
| Bus | ||
| Generic bus | transportkit-salzburg--b |
 |
However, if you want to use the CSS files right without compiling, you can refer to these links to get the styles for all cities or insert the lower case city name into the second link:
Please note that some icons may have restrictions or require a license prior to use.
Please read the guidelines of the companies before using them.