Permalink
Browse files

Genericons Neue

This is a refreshed version of Genericons (https://github.com/Automattic/Genericons), which is more consistent in its visual style and weight.

A bunch of icons have been removed, including all logos, and older dingbats that are better drawn using CSS today.
  • Loading branch information...
1 parent bd9b8dc commit b19644b6e7fc8a3632a3006aaede6752b3b5c5ba @jasmussen jasmussen committed Nov 15, 2016
Showing with 4,148 additions and 2 deletions.
  1. +9 −0 COPYING.md
  2. +195 −0 Gruntfile.js
  3. 0 LICENSE → LICENSE.md
  4. +52 −2 README.md
  5. +209 −0 codepoints.json
  6. +554 −0 icon-font/Genericons-Neue.css
  7. BIN icon-font/Genericons-Neue.eot
  8. +847 −0 icon-font/Genericons-Neue.html
  9. +1 −0 icon-font/Genericons-Neue.min.css
  10. BIN icon-font/Genericons-Neue.ttf
  11. BIN icon-font/Genericons-Neue.woff2
  12. +433 −0 icon-template.ai
  13. +34 −0 package.json
  14. +1 −0 svg-min/activity.svg
  15. +1 −0 svg-min/anchor.svg
  16. +1 −0 svg-min/aside.svg
  17. +1 −0 svg-min/attachment.svg
  18. +1 −0 svg-min/audio-mute.svg
  19. +1 −0 svg-min/audio.svg
  20. +1 −0 svg-min/bold.svg
  21. +1 −0 svg-min/book.svg
  22. +1 −0 svg-min/bug.svg
  23. +1 −0 svg-min/cart.svg
  24. +1 −0 svg-min/category.svg
  25. +1 −0 svg-min/chat.svg
  26. +1 −0 svg-min/checkmark.svg
  27. +1 −0 svg-min/close-alt.svg
  28. +1 −0 svg-min/close.svg
  29. +1 −0 svg-min/cloud-download.svg
  30. +1 −0 svg-min/cloud-upload.svg
  31. +1 −0 svg-min/cloud.svg
  32. +1 −0 svg-min/code.svg
  33. +1 −0 svg-min/cog.svg
  34. +1 −0 svg-min/collapse.svg
  35. +1 −0 svg-min/comment.svg
  36. +1 −0 svg-min/day.svg
  37. +1 −0 svg-min/document.svg
  38. +1 −0 svg-min/download.svg
  39. +1 −0 svg-min/edit.svg
  40. +1 −0 svg-min/ellipsis.svg
  41. +1 −0 svg-min/expand.svg
  42. +1 −0 svg-min/external.svg
  43. +1 −0 svg-min/fastforward.svg
  44. +1 −0 svg-min/feed.svg
  45. +1 −0 svg-min/flag.svg
  46. +1 −0 svg-min/fullscreen.svg
  47. +1 −0 svg-min/gallery.svg
  48. +1 −0 svg-min/heart.svg
  49. +1 −0 svg-min/help.svg
  50. +1 −0 svg-min/hide.svg
  51. +1 −0 svg-min/hierarchy.svg
  52. +1 −0 svg-min/home.svg
  53. +1 −0 svg-min/image.svg
  54. +1 −0 svg-min/info.svg
  55. +1 −0 svg-min/italic.svg
  56. +1 −0 svg-min/key.svg
  57. +1 −0 svg-min/link.svg
  58. +1 −0 svg-min/location.svg
  59. +1 −0 svg-min/lock.svg
  60. +1 −0 svg-min/mail.svg
  61. +1 −0 svg-min/menu.svg
  62. +1 −0 svg-min/microphone.svg
  63. +1 −0 svg-min/minus.svg
  64. +1 −0 svg-min/month.svg
  65. +1 −0 svg-min/move.svg
  66. +1 −0 svg-min/next.svg
  67. +1 −0 svg-min/notice.svg
  68. +1 −0 svg-min/paintbrush.svg
  69. +1 −0 svg-min/pause.svg
  70. +1 −0 svg-min/phone.svg
  71. +1 −0 svg-min/picture.svg
  72. +1 −0 svg-min/pinned.svg
  73. +1 −0 svg-min/play.svg
  74. +1 −0 svg-min/plugin.svg
  75. +1 −0 svg-min/plus.svg
  76. +1 −0 svg-min/previous.svg
  77. +1 −0 svg-min/print.svg
  78. +1 −0 svg-min/quote.svg
  79. +1 −0 svg-min/refresh.svg
  80. +1 −0 svg-min/reply.svg
  81. +1 −0 svg-min/rewind.svg
  82. +1 −0 svg-min/search.svg
  83. +1 −0 svg-min/send-to-phone.svg
  84. +1 −0 svg-min/send-to-tablet.svg
  85. +1 −0 svg-min/share.svg
  86. +1 −0 svg-min/show.svg
  87. +1 −0 svg-min/shuffle.svg
  88. +1 −0 svg-min/sitemap.svg
  89. +1 −0 svg-min/skip-ahead.svg
  90. +1 −0 svg-min/skip-back.svg
  91. +1 −0 svg-min/spam.svg
  92. +1 −0 svg-min/standard.svg
  93. +1 −0 svg-min/star-empty.svg
  94. +1 −0 svg-min/star-half.svg
  95. +1 −0 svg-min/star.svg
  96. +1 −0 svg-min/status.svg
  97. +1 −0 svg-min/stop.svg
  98. +1 −0 svg-min/subscribe.svg
  99. +1 −0 svg-min/subscribed.svg
  100. +1 −0 svg-min/summary.svg
  101. +1 −0 svg-min/tablet.svg
  102. +1 −0 svg-min/tag.svg
  103. +1 −0 svg-min/time.svg
  104. +1 −0 svg-min/top.svg
  105. +1 −0 svg-min/trash.svg
  106. +1 −0 svg-min/unapprove.svg
  107. +1 −0 svg-min/unsubscribe.svg
  108. +1 −0 svg-min/unzoom.svg
  109. +1 −0 svg-min/user.svg
  110. +1 −0 svg-min/video.svg
  111. +1 −0 svg-min/videocamera.svg
  112. +1 −0 svg-min/warning.svg
  113. +1 −0 svg-min/website.svg
  114. +1 −0 svg-min/week.svg
  115. +1 −0 svg-min/xpost.svg
  116. +1 −0 svg-min/zoom.svg
  117. +66 −0 svg-sprite/genericons-neue-demo.css
  118. +27 −0 svg-sprite/genericons-neue-demo.js
  119. +104 −0 svg-sprite/genericons-neue.svg
  120. +740 −0 svg-sprite/index.html
  121. +10 −0 svg/activity.svg
  122. +9 −0 svg/anchor.svg
  123. +7 −0 svg/aside.svg
  124. +8 −0 svg/attachment.svg
  125. +6 −0 svg/audio-mute.svg
  126. +8 −0 svg/audio.svg
  127. +7 −0 svg/bold.svg
  128. +6 −0 svg/book.svg
  129. +10 −0 svg/bug.svg
  130. +8 −0 svg/cart.svg
  131. +6 −0 svg/category.svg
  132. +7 −0 svg/chat.svg
  133. +6 −0 svg/checkmark.svg
  134. +7 −0 svg/close-alt.svg
  135. +7 −0 svg/close.svg
  136. +7 −0 svg/cloud-download.svg
  137. +7 −0 svg/cloud-upload.svg
  138. +7 −0 svg/cloud.svg
  139. +7 −0 svg/code.svg
  140. +11 −0 svg/cog.svg
  141. +6 −0 svg/collapse.svg
  142. +10 −0 svg/comment.svg
  143. +7 −0 svg/day.svg
  144. +7 −0 svg/document.svg
  145. +6 −0 svg/download.svg
  146. +9 −0 svg/edit.svg
  147. +7 −0 svg/ellipsis.svg
  148. +6 −0 svg/expand.svg
  149. +7 −0 svg/external.svg
  150. +7 −0 svg/fastforward.svg
  151. +11 −0 svg/feed.svg
  152. +7 −0 svg/flag.svg
  153. +6 −0 svg/fullscreen.svg
  154. +7 −0 svg/gallery.svg
  155. +6 −0 svg/heart.svg
  156. +8 −0 svg/help.svg
  157. +13 −0 svg/hide.svg
  158. +6 −0 svg/hierarchy.svg
  159. +7 −0 svg/home.svg
  160. +7 −0 svg/image.svg
  161. +7 −0 svg/info.svg
  162. +6 −0 svg/italic.svg
  163. +7 −0 svg/key.svg
  164. +10 −0 svg/link.svg
  165. +7 −0 svg/location.svg
  166. +7 −0 svg/lock.svg
  167. +9 −0 svg/mail.svg
  168. +6 −0 svg/menu.svg
  169. +7 −0 svg/microphone.svg
  170. +6 −0 svg/minus.svg
  171. +9 −0 svg/month.svg
  172. +7 −0 svg/move.svg
  173. +6 −0 svg/next.svg
  174. +9 −0 svg/notice.svg
  175. +7 −0 svg/paintbrush.svg
  176. +6 −0 svg/pause.svg
  177. +7 −0 svg/phone.svg
  178. +6 −0 svg/picture.svg
  179. +7 −0 svg/pinned.svg
  180. +6 −0 svg/play.svg
  181. +7 −0 svg/plugin.svg
  182. +6 −0 svg/plus.svg
  183. +6 −0 svg/previous.svg
  184. +10 −0 svg/print.svg
  185. +6 −0 svg/quote.svg
  186. +8 −0 svg/refresh.svg
  187. +6 −0 svg/reply.svg
  188. +7 −0 svg/rewind.svg
  189. +7 −0 svg/search.svg
  190. +9 −0 svg/send-to-phone.svg
  191. +13 −0 svg/send-to-tablet.svg
  192. +8 −0 svg/share.svg
  193. +12 −0 svg/show.svg
  194. +8 −0 svg/shuffle.svg
  195. +11 −0 svg/sitemap.svg
  196. +6 −0 svg/skip-ahead.svg
  197. +6 −0 svg/skip-back.svg
  198. +8 −0 svg/spam.svg
  199. +7 −0 svg/standard.svg
  200. +8 −0 svg/star-empty.svg
  201. +7 −0 svg/star-half.svg
  202. +6 −0 svg/star.svg
  203. +6 −0 svg/status.svg
  204. +6 −0 svg/stop.svg
  205. +8 −0 svg/subscribe.svg
  206. +8 −0 svg/subscribed.svg
  207. +7 −0 svg/summary.svg
  208. +10 −0 svg/tablet.svg
  209. +7 −0 svg/tag.svg
  210. +8 −0 svg/time.svg
  211. +6 −0 svg/top.svg
  212. +7 −0 svg/trash.svg
  213. +11 −0 svg/unapprove.svg
  214. +7 −0 svg/unsubscribe.svg
  215. +7 −0 svg/unzoom.svg
  216. +6 −0 svg/user.svg
  217. +7 −0 svg/video.svg
  218. +7 −0 svg/videocamera.svg
  219. +7 −0 svg/warning.svg
  220. +11 −0 svg/website.svg
  221. +7 −0 svg/week.svg
  222. +9 −0 svg/xpost.svg
  223. +7 −0 svg/zoom.svg
View
@@ -0,0 +1,9 @@
+Genericons is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
+
+The fonts are distributed WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+
+As a special exception, if you create a document which uses this font, and embed this font or unaltered portions of this font into the document, this font does not by itself cause the resulting document to be covered by the GNU General Public License. This exception does not however invalidate any other reasons why the document might be covered by the GNU General Public License. If you modify this font, you may extend this exception to your version of the font, but you are not obligated to do so. If you do not wish to do so, delete this exception statement from your version.
+
+This license does not convey any intellectual property rights to third party trademarks that may be included in the icon font; such marks remain subject to all rights and guidelines of use of their owner.
View
@@ -0,0 +1,195 @@
+/*
+ * Export Genericons
+ */
+
+'use strict';
+
+var multiline = require('multiline');
+
+module.exports = function(grunt) {
+
+ // Project configuration.
+ grunt.initConfig({
+
+ // Minify SVGs from svg directory, output to svg-min
+ svgmin: {
+ dist: {
+ files: [{
+ attrs: 'fill',
+ expand: true,
+ cwd: 'svg',
+ src: ['*.svg'],
+ dest: 'svg-min/',
+ ext: '.svg'
+ }]
+ },
+ options: {
+ plugins: [
+ { removeAttrs: { attrs: ['fill', 'id', 'style'] } },
+ { removeViewBox: false },
+ { removeEmptyAttrs: false }
+ ]
+ }
+ },
+
+ // Create single SVG sprite for use outside of React environments, output to svg-sprite
+ svgstore: {
+ withCustomTemplate:{
+ options: {
+ prefix : '', // Unused by us, but svgstore demands this variable
+ svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
+ viewBox : '0 0 16 16',
+ xmlns: 'http://www.w3.org/2000/svg'
+ },
+
+ cleanup : ['style', 'fill', 'id'],
+
+ includedemo : multiline.stripIndent(function(){/*
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <title>Genericons Neue</title>
+ <meta name="robots" content="noindex">
+ <link rel="stylesheet" type="text/css" href="genericons-neue-demo.css" />
+ <script src="genericons-neue-demo.js"></script>
+ </head>
+ <body>
+
+ <h1>Genericons Neue</h1>
+
+ {{{svg}}}
+
+ <div id="icons">
+ {{#each icons}}
+ <div>
+ <svg width="16" height="16" class="genericon {{name}}">
+ <use xlink:href="#{{name}}" />
+ </svg>
+ <p>{{title}}</p>
+ </div>
+ {{/each}}
+ </div>
+
+ </body>
+ </html>
+ */})
+
+ },
+ files: {
+ 'svg-sprite/genericons-neue.svg': ['svg/*.svg']
+ }
+ },
+ },
+
+ rename: {
+ moveThis: {
+ src: 'svg-sprite/genericons-neue-demo.html',
+ dest: 'svg-sprite/index.html'
+ },
+ },
+
+ // generate a web font
+ webfont: {
+ icons: {
+ src: 'svg/*.svg',
+ dest: 'icon-font'
+ },
+ options: {
+ 'font': 'Genericons-Neue',
+ 'types': 'eot,woff2,woff,ttf',
+ 'order': 'eot,woff,ttf',
+ 'embed': true,
+ 'relativeFontPath': 'icon-font',
+ templateOptions: {
+ baseClass: 'genericons-neue',
+ classPrefix: 'genericons-neue-',
+ mixinPrefix: 'genericon-neue-'
+ },
+ codepointsFile: 'codepoints.json'
+ }
+ },
+
+ cssmin: {
+ target: {
+ files: [{
+ expand: true,
+ cwd: 'icon-font/',
+ src: ['*.css', '!*.min.css'],
+ dest: 'icon-font/',
+ ext: '.min.css'
+ }]
+ }
+ },
+ });
+
+ // Load the copier
+ grunt.loadNpmTasks('grunt-contrib-copy');
+
+ // Load the SVGstore
+ grunt.loadNpmTasks('grunt-svgstore');
+
+ // Load the renamer
+ grunt.loadNpmTasks('grunt-rename');
+
+ // Load svgmin
+ grunt.loadNpmTasks('grunt-svgmin');
+
+ // load the webfont creater
+ grunt.loadNpmTasks('grunt-webfont');
+
+ // minify css files
+ grunt.loadNpmTasks('grunt-contrib-cssmin');
+
+ // Update all files in svg-min to add a <g> group tag
+ grunt.registerTask( 'group', 'Add <g> tag to SVGs', function() {
+ var svgFiles = grunt.file.expand( { filter: 'isFile', cwd: 'svg-min/' }, [ '**/*.svg' ] );
+
+ // Add stuff
+ svgFiles.forEach( function( svgFile ) {
+
+ // Grab the relevant bits from the file contents
+ var fileContent = grunt.file.read( 'svg-min/' + svgFile );
+
+ // Add transparent rectangle to each file
+ fileContent = fileContent.slice( 0, fileContent.indexOf('viewBox="0 0 16 16">') + 20 ) + // opening SVG tag
+ '<g>' +
+ fileContent.slice( fileContent.indexOf('viewBox="0 0 16 16">') + 20, -6 ) + // child elements of SVG
+ '</g>' +
+ fileContent.slice( -6 ); // closing SVG tag
+
+ // Save and overwrite the files in svg-min
+ grunt.file.write( 'svg-min/' + svgFile, fileContent );
+
+ } );
+
+ });
+
+ // Update all files in svg-min to add transparent square, this ensures copy/pasting to Sketch maintains a 16x16 size
+ grunt.registerTask( 'addsquare', 'Add transparent square to SVGs', function() {
+ var svgFiles = grunt.file.expand( { filter: 'isFile', cwd: 'svg-min/' }, [ '**/*.svg' ] );
+
+ // Add stuff
+ svgFiles.forEach( function( svgFile ) {
+
+ // Grab the relevant bits from the file contents
+ var fileContent = grunt.file.read( 'svg-min/' + svgFile );
+
+
+ // Add transparent rectangle to each file
+ fileContent = fileContent.slice( 0, fileContent.indexOf('viewBox="0 0 16 16">') + 20 ) +
+ '<rect x="0" fill="none" width="16" height="16"/>' +
+ fileContent.slice( fileContent.indexOf('viewBox="0 0 16 16">') + 20, -6 ) +
+ fileContent.slice( -6 );
+
+ // Save and overwrite the files in svg-min
+ grunt.file.write( 'svg-min/' + svgFile, fileContent );
+
+ } );
+
+ });
+
+ // Default task(s).
+
+ grunt.registerTask('default', ['svgmin', 'group', 'svgstore', 'rename', 'webfont', 'cssmin','addsquare']);
+
+};
File renamed without changes.
View
@@ -1,2 +1,52 @@
-# genericons-neue
-Genericons are generic looking icons, suitable for a blog or simple website
+# Genericons Neue
+
+Genericons Neue are generic looking icons, suitable for a blog or simple website.
+
+Genericons Neue is a new version of <a href="https://github.com/Automattic/Genericons">Genericons</a>, with a refreshed look, but no social logos. That means if you use any of the logos from Genericons, *you can't use Genericons Neue as a drop-in replacement*. If you used only icons, you probably can, but be sure to test thoroughly. For a much better set of social logos, please please consider <a href="https://github.com/Automattic/social-logos">Social Logos</a>.
+
+## Usage
+
+The Genericons Neue icon set comes in three versions:
+
+- Minimized SVG files in the `svg-min` directory
+- An SVG sprite (not compatible with IE) in the `svg-sprite` directory
+- An icon font (<a href="https://code.google.com/p/chromium/issues/detail?id=426333">shows up blurry in Chrome</a>) in the `icon-font` directory
+
+
+## Icon Set Style Guidelines
+
+- 16pt base grid
+- mostly straight angles, with occasional rounded edges for style
+- flat, bidimensional look
+- 2pt lines generally
+- 1.5pt lines when necessary for clarity, be sure to have one edge on the pixelgrid
+- 2pt corner radius
+- no logos
+- mostly solid icons
+
+These are not rules, they are guidelines that can be broken with the proper reason.
+
+
+## Building your own Genericons
+
+Genericons Neue is built semi-automatically. SVG source files in the `svg` directory are processed and converted into minimized SVGs, a sprite, and an icon font using `grunt`. To build your own version of Genericons Neue, follow these instructions:
+
+```
+brew install ttfautohint fontforge --with-python
+npm install
+grunt
+```
+
+## Notes
+
+**Pixel grid**
+
+Genericons Neue has been designed for a 16x16px grid. That means it'll look sharp at font-size: 16px exactly. It'll also be crisp at multiples thereof, such as 32px or 64px. It'll look reasonably crisp at in-between font sizes such as 24px or 48px, but not quite as crisp as 16 or 32. Please don't set the font-size to 17px, though, that'll just look terrible blurry.
+
+**Antialiasing**
+
+If you keep intact the `-webkit-font-smoothing: antialiased;` and `-moz-osx-font-smoothing: grayscale;` CSS properties. That'll make the icons look their best possible, in Firefox and WebKit based browsers.
+
+**optimizeLegibility**
+
+Note: On Android browsers with version 4.2, 4.3, and probably later, Genericons Neue will simply not show up if you're using the CSS property "text-rendering" set to "optimizeLegibility.
Oops, something went wrong.

0 comments on commit b19644b

Please sign in to comment.