automattic / genericons-neue

Genericons Neue 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 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.

genericons-neue's Issues

Discord icon

Would be great to add an icon for Discord

Add Newspaper Icon

While the future of newspapers is debatable, a newspaper icon is usually a fairly generic way of indicating news.

Add Steemit Icon

Please, can you add the Steemit Icon to your collection.

Add calendar icon

You have day and month...what about a generic calendar icon?

Icon has other position as text

Hi, i used genericons in a web project, but i got a problem.

I use the following html:

<span id="icon"></span><?php....

the following CSS:
#icon::after { font-family: "Genericons"; padding-right: 3px; padding-left: 3px; font-size: inherit; line-height: inherit; content: "\f303"; }

the browser shows it like in the attachment. the icon and the text are not in the same line. i googled hours and i cannot figure out why this happens. has anybody a suggestion? ist it recommended to do this the way i did?

thanks in advance

Add CSS usage instructions

The README.md is a little bare when it comes to instructions on how to use these icons in your themes or projects.

Either link to sites that explain this, or provide instructions.

Create npm module for Genericons Neue

Genericons Neue should be easy to include in Node projects. Let's publish it as a node module.