Traffico
Fork me on GitHub

Traffico

An Open Source Traffic Sign Font

Download v0.1.26
fonts, stylesheets & json
Check out the source code

Traffico provides a set of layers that can be composed into traffic signs icons in a form of a web font. Accompanying .json files allow to generate templates on the fly. Check out the Shapes page for available shapes or Examples for what is available in the .json files.

Install from command line: $ bower install traffico

More examples

Made with ♥ at Mapillary

A collection of layers

Traffico is a collection of vector shapes, that are meant to be stacked on one another

For example, to build a ‘Warning of danger ahead’ sign, after attaching stylesheets and the font files:

<span class="t">
  <i class="t-tri-rounded t-c-red"></i>
  <i class="t-tri-angular t-c-yellow" style="transform:translate(0,14.43%) scale(.7) translate(0,-14.43%)"></i>
  <i class="t-exclamation t-c-black" style="transform:translate(0,14.43%) scale(.65) translate(0,-14.43%)"></i>
</span>

This will result in:

Generative templates

With every Traffico release, there is a set of .json files attached, which provide for a good foundation for generating templates in a framework of your choice.

{
  "information_pedestrian_crossing": {
    "category":"information",
    "name":"pedestrian crossing",
    "elements":[
      {
        "type":"square-rounded",
        "color":"blue"
      },
      {
        "type":"tri-angular",
        "color":"white",
        "transform":"scale(.8)"
      },
      {
        "type":"pedestrian-crossing",
        "color":"black"
      }
    ]
  }
}

Status

Traffico is under development, suggestions and contributions are welcome. Fork the source on GitHub.

License

MIT