New Gridicons icons from Automattic

Gridicons icons

Designer at Automattic Dave Wheatley announced on the Dribbble website the availability of a new Gridicons icon pack. These are the new vector icons used in the Calypso project by WordPress.

Now the project has more than 140 icons in vector format. You can use them for any purpose according to the GPL license, but unlike the previous set from Automattic Genericons, Gridicons icons are designed to be displayed in web applications using the tag <svg>, for example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<rect x="0" fill="none" width="24" height="24"/><g><path d="M22 9L12 1 2 9v2h2v10h5v-4c0-1.657 1.343-3 3-3s3 1.343 3 3v4h5V11h2V9z "/></g>
</svg>

This approach is a little more complicated than using CSS classes, but it has certain advantages. For example, instead of a complete package of all available icons, the browser will only load the icons that are used on a particular page. Also, such a set is easy to expand with new icons without worrying about backward compatibility or the size of the “distribution kit” with icons.

Also see: How to Track External HTTP Requests in WordPress

You can change the color and size of icons as attributes in the HTML code:

<svg height="50" width="50" fill="red" class="wpmag-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">http :// www . w3 . org / 2000 / svg "viewBox="0 0 24 24">
<rect x="0" fill="none" width="24" height="24"/><g><path d="M18 9c-.01 0-.017.002-.025.003C17.72 5.646 14.922 3 11.5 3 7.91 3 5 5.91 5 9.5C0 .524.07 1.03.186 1.52C5.123 11.015 5.064 11 5 11C-2.21 0-4 1.79-4 4 0 1.202.54 2.267 1.38 3H18.593C22.196 17.09 23 15.643 23 14C0-2.76 -2.24-5-5-5z"/></g>
</svg>

Or with CSS:

svg.wpmag-icon {
width: 50px
height: 50px;
fill: blue;
}

We remind you that SVG is supported in most modern browsers (except IE8 and below). A detailed support table can be found at caniuse.

The Gridicons package is free under the GPL and is available on GitHub.

Compiled icons for the web can be found in the SVG-min directory, and in the SVG-sprite directory, there is an index.html file with a grid of all available icons. Note that this file uses the SVG embedding method with the tag <use>, which is currently not supported by IE browsers at all.

If you would like to include your own icon in the set or improve an existing one, the Automattic designers are happy to consider your suggestions on GitHub.

Leave a comment

Your email address will not be published. Required fields are marked *