Why an icon font?

In Europe most of the warning signs are triangles, with a red border. In United States on the other hand, most of the warning signs are a diamond shape with yellow background and the content in black. Both US and Europe have mostly the same content within these signs. What if we could reuse these shapes, then just swap and color the others on the go? Our main reasoning behind deciding to build a font was to compose a set of common shapes which we could reuse in such ways and to have it as a one package, without messing with hundreds of .svg files. The existing (mainly image based) solutions for handling traffic signs also didn't cut it for us in terms of visual quality.

We wanted Traffico to be modular and to allow people to generate traffic signs icons on the fly in their templates. We also wanted something that would look beautiful on all sceeen sizes.

How does it work?

Traffico is meant to be stacked and most of the shapes that it consists of would play nicely with one another. After including the font files and the stylesheet on your website, you can easily build traffic signs by stacking their layers on one another, for example to build a 'warning of danger ahead' sign, all you have to do is to use a following snippet of code:

<span class="t">
  <i class="t-tri-bg t-c-yellow"></i>
  <i class="t-tri-o t-c-red"></i>
  <i class="t-exclamation t-c-black fit"></i>
</span>

The code above will result in the following example: .

In case you need to have a white background instead of yellow - no problem - it is a matter of changing the t-c-* class, which covers all the commonly used colors in the traffic sign world.

For some people typing this out could be cumbersome, therefore each Traffico release contains a .json files containing following template structure:

"information_pedestrian_crossing": {
  "category":"other",
  "name":"pedestrian crossing",
  "elements":[
    {
    "type":"square-bg",
    "value":"blue"
    },
    {
      "type":"tri-bg-in",
      "value":"white"
    },
    {
      "type":"pedestrian-crossing",
      "value":"black"
    }
  ]
}

What's next?

Currently Traffico contains most of the popular shapes found on the road signs, however we will be adding more on an ongoing basis. If you'd like to contribute or have suggestions/opinions, let us know!

Kamil & The Mapillary Team