Genericons Neue are generic looking icons, suitable for a blog or simple website
HTML CSS JavaScript
Latest commit c017eaf Dec 7, 2016 @mkaz mkaz Bump to v4.0.5

README.md

Genericons Neue

Genericons Neue are generic looking icons, suitable for a blog or simple website.

Genericons Neue

Genericons Neue is a new version of Genericons, with a refreshed look. Logos have been removed, however, so if you're upgrading 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 great set logos, please consider Social Logos.

Usage

The 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 (shows up blurry in Chrome) in the icon-font directory
  • For Node projects, there's an npm module

Genericons Neue can be used in WordPress themes or other web related projects. CSSTricks has great instructions on how to use SVG files, and how to use icon fonts. You can pick the one that works best for your project.

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 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
npm run build

Pixel Grid

Genericons Neue has been designed for a 16px grid. That means icons will look their best at that size, or 2x multiples thereof, such as 32px or 64px. Icons will also look reasonably crisp at in-between 1.5x multiples such as 24px or 48px, but edges will look blurry at arbitrary multiples. Please don't size them at 17px, for example.