Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Icons described by a path only. AMD loader for bundling and compression.
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


A Pathicon is simply an icon described by a svg path. See Raphael Icons as an example.

Here is an example path:

M2.379,14.729 5.208,11.899 12.958,19.648 25.877,6.733 28.707,9.561 12.958,25.308z

This describes a checkmark. Place the above in a file called img/checkmark.path

Adding to a page

Add a div, or an i tag, eg:

<i id="checkmark-icon" />

and then bind an icon to it using requirejs

define(["pathicon!img/checkmark?id=checkmark-icon,width=64,height=64,fill=#ccc"], function(icon){})

at this point you will have a 64x64 icon rendered filled #ccc! Simple.

Want to do more? the icon variable is a raphael element that can be manipulated. Eg.



you will need jam

jam install pathicon


The whole point of pathicons is they are small, and that when you opimize with requirejs, they are minified and included in the optimized file. This can allow you to have only one .js file to hold all your js and your icons! Sweet.

Where Can I Get Paths?

We are working on a svg->path tool, but in the meantime, you can do mostly by had pretty easy. Here are some good places for vector icons:

Is this better than Font Icons?

I am not sure. Time will tell. Font icons seem like a workaround, and a lot of work to create!

Something went wrong with that request. Please try again.