Gridicons – An Open Source Vector Icon pack

gridiconsAutomattic team published a new open source icon pack called Gridicons. This icon set is designed by Dave Wheatley with the collaboration of other Automattic designers. These new vector icons are used in the Calypso project at WordPress.com.

Now the project has more than 140 icons in vector format. They can be used for any purpose under the GPL license. You can use Gridicons icons to display in web applications using the <svg> tag, for example:

Although this approach is a bit more complicated than using CSS classes, it has certain advantages. For example, instead of using fully available icon package, the browser will load only those icons that are used on a particular page. Also, it is easy to extend new icons from the similar set without worrying about backward compatibility, or the size.

Here is an example of changing the color and size of the Gridicons, in the HTML code:

 

Or using CSS:

 

Most modern browsers support SVG (except for the IE8 and below). Checkout the detail list of supported browser versions at caniuse.com.

Gridicons package is distributed for free under the GPL and is available on GitHub website.

Compiled icons for the web can be found in the directory svg-min. Note that this file uses SVG implementation method using the tag <use>, which is currently not supported by IE browsers.


Here is a simple example of inline SVG from Codepen by Keyamoon:

You can optimize SVG icons using IcoMoon. You can also use a simple Polyfill from Keyamoon to fix external SVG fetching issues.

If you want to propose your own icon with this package or want to improve existing ones, Automattic designers are happy to consider your suggestions on GitHub.

WBD Team

Our excellent WBD team working day and night to put together best content for you.

You may also like...