Channels ▼
RSS

Mobile

Google Offers 750 Free Design Icons


Google Design has freely open-sourced 750 glyphs (or typographic icon/symbols) as part of the Material Design system icons pack.

Google Design is a division/place for designers to learn about design at Google and how to create products on platforms like Android and the Web.

The system icons contain icons commonly used across different apps, such as icons used for media playback, communication, content editing, connectivity, and so on. Google says they're equally useful when building for the Web, Android or iOS.

A complete live preview of the icons is available here.

A good number of the glyphs here feature in Android 5.0 Lollipop — and they also form an element of Google's Material Design renovations so developers can use them to keep applications looking sharp and up to date.

The Material Design website describes itself as follows: "We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

Here's what you can expect to find inside this big juicy (and free) icon pack:

  • SVG versions of all icons in both 24px and 48px flavors
  • SVG and CSS sprites of all icons
  • 1x, 2x icons targeted at the Web (PNG)
  • 1x, 2x, 3x icons targeted at iOS (PNG)
  • Hi-dpi versions of all icons (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG)

Developers can download a zip file, grab the latest release as a zip archive (~57MB), and install the icons using the Bower package manager. You can also find all the icons on npm.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video