Community Icons
The aim of this project is to create a common stock of user interface icons. Through collaboration, it should be possible to create sets of icons for @font-face embedding that are more archetypal and reusable than through other means. The project is hosted on GitHub. To get involved, please fork the repository. If you want to know how it works, please read on …
Current status
The icon set for the original repository currently looks like this:
| AA | BB | CC | DD | EE | FF |
| GG | HH | II | JJ | KK | LL |
| MM | NN | OO | PP | RR | SS | TT | UU | VV | WW | XX |
| YY | ZZ | aa | bb | cc | dd |
| ee | ff | gg | hh | ii | jj |
| kk | ll | mm | nn | oo | pp |
| rr | ss | tt | uu | vv | |
| ww | xx | yy | zz |
Note: For icon glyphs that are not yet created, the fallback font (Cabin, here) displays instead.
SVG is the key
The most important source file in the project is called icons.svg. This file
is an SVG font file. An individual icon is defined in the file by the <glyph> tag
and looks something like this:
<glyph glyph-name="GitHub Fork Icon" unicode="F" d="M635.352 545.464l-70.7031 -71.025l135.352 -135.968v-230.341h100v251.138c-0.00219727 11.4834 -6.5647 27.393 -14.6484 35.5125zM700 962v-176.738l-481.25 -386.753c-10.35 -8.3252 -18.75 -25.8918 -18.75 -39.2113l1.52588e-05 -0.0290222v-200.91h100v176.738 l481.25 386.753c10.35 8.3252 18.75 25.8918 18.75 39.2113v0.0289917v200.91h-100zM600 170.915c-4.90216 -0.00999451 -9.65161 -3.20517 -11.5264 -7.75525c-1.87488 -4.55008 -0.763 -10.1828 2.6983 -13.67l150 -150.683 c2.31342 -2.3179 5.56073 -3.6666 8.82812 -3.6666s6.51471 1.3487 8.82812 3.6666l150 150.683c3.4613 3.48715 4.57318 9.11987 2.6983 13.67c-1.87482 4.55008 -6.62433 7.74564 -11.5264 7.75525h-300zM100 170.915 c-4.90214 -0.00999451 -9.65163 -3.20517 -11.5265 -7.75525c-1.87484 -4.55008 -0.762985 -10.1828 2.69833 -13.67l150 -150.683c2.3134 -2.3179 5.56076 -3.6666 8.82812 -3.6666s6.51474 1.3487 8.82812 3.6666l150 150.683 c3.4613 3.48715 4.57318 9.11987 2.69833 13.67c-1.87482 4.55008 -6.62433 7.74564 -11.5265 7.75525z" />
First of the attributes is glyph-name. Since this is a glyph for a GitHub-style forking icon, I've named it accordingly. Second is unicode. This attribute lets you define the character to which the icon will be assigned. The d attribute describes the path coordinates that determine the visual shape of the icon glyph.
Making icons
The easiest way to make icons is by using free path editor Inkscape's SVG Font Editor. Open the icons.svg file (in the fonts folder from your local repository) in Inkscape and draw away. Watching this video tutorial will help you get familiar with the technique, but ignore the high baseline guide: Sit your glyphs on the much lower guide provided in our version.
Once the icon has been successfully added to the master file, you can save it back to your repository, ready to be merged with other versions. Of course, you may not want to create entirely new icons. You could tweak the pathing of icons made by others or even replace icons that you don't think work very well at all.
Note: Please only make or modify icons for alphabetic characters (uppercase or lowercase). Currently, the project is only supporting these characters. Only these will appear on your demo page (demo/index.html – see below).
Demoing your set
Inside your repository is a page much like this one which can be used to demo your icons embedded in the page. For this to work, you currently have to manually convert the newly edited SVG font to TTF, WOFF and EOT. A service like Font Squirrel's Generator is probably the best way to do this until we have developed an automated build script. Rename the fonts in the Font Squirrel pack as icons.ttf, icons.woff and icons.eot, then replace the older files in your fonts folder.
To view the demo, open demo/index.html in a browser. When you're happy with your changes you may want them to be included in the main version. In this case, send us a pull request.
Why collaboration?
There are an increasing number of icon fonts available for use in web pages. They're much better than images for UI elements because they resize without degradation, making them great for responsive designs. However, it's hard to find a single font that covers all of the important icons is a satisfactory way.
By crowdsoucing icon designs there's a better chance of creating sets that cover the greatest number of use cases, featuring versions of icons that we can agree look just right for what they are supposed to represent.
