Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

gridicons

Package Overview
Dependencies
Maintainers
2
Versions
54
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gridicons

The [Calypso](https://github.com/Automattic/wp-calypso/) / [WordPress.com](https://wordpress.com) official icon set.

  • 2.0.2-alpha.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8.9K
increased by15.02%
Maintainers
2
Weekly downloads
 
Created
Source

Gridicons

The Calypso / WordPress.com official icon set.

Using the Gridicon Component in your project:

Note that this component requires react to be installed in your project.

Gridicon renders a single svg icon based on an icon prop. It takes a size property but defaults to 24px. For greater sharpness, the icons should only be shown at either 18px, 24px, 36px or 48px.

There's a gallery with all the available icons in http://automattic.github.io/gridicons/..

npm install gridicons --save
Usage
import Gridicon from 'gridicons';
//...
render() {
    return <Gridicon icon="add-image" />;
}
Props
  • icon: String - the icon name.
  • size: Number - (default: 24) set the size of the icon.
  • onClick: Function - (optional) if you need a click callback.

Notes:

  • The icon set is made to be used exactly at these pixel sizes: 12, 18, 24, 36, 48, 54, 72.
  • gridicon-my-sites as it's a small-size version of the WordPress logo, shouldn't be used larger than 36px. If you need to use the WordPress logo in larger sizes, see the Social Logos project.

Icon Set Style Guidelines

  • 24dp base grid
  • straight 45 degree angles
  • flat, bidimensional look (no faux 3D whatsoever)
  • 2dp lines
  • 2dp radius rounded corners
  • no logos
  • hollow means inactive, solid means active (for example a hollow bookmark star is solid when checked)
  • icons should be sized optically so they are balanced against each other, see icon-template.ai

These are not rules, they are guidelines that can be broken with the proper reason. The purpose of them is to achieve a uniform look as we all work on it together. They are also open to growing organically. They are meant to guide you to create an icon that fits with all the others (style, alignment, size, ...), if you break any of the above to make it fit better, that works too.

Notes:

  • the svg-min files can both be used in production directly or dragged to Sketch to create designs.
  • the sources/svg-32 folder contains a subset of icons optimized at 32px, for the iOS navigation bar.

Propose a New Icon

Note that the icons in this set are tied to be used in Calypso, but there might be exceptions for more general icons that make sense to be added.

  1. Make sure you have a updated local clone of the repository.
  2. Draw the icon in Illustrator on a 24px grid using the guidelines above (use icon-template.ai as starting point).
    Tip: tap CMD + Option + Y in Illustrator to see the pixel grid version.
  3. Submit a Pull Request with the icon as a SVG file (inside the sources/svg folder), make sure to include a screenshot, ideally containing side by side comparison with some other Gridicons as a visual reference.
  4. Discuss, iterate, review, refine until ready.
  5. Once ready, an admin will proceed adding it.

Add a Proposed Icon to Gridicons (Admins Only)

  1. Switch to the branch (i.e. Pull Request) with the new icon.
  2. Review the SVG source of the new icons to make sure they are clean and readable.
  3. Check pixel sharpness: open in Illustrator (with "Pixel Preview") or Sketch (with "Show Pixels"), adjust if needed.
  4. Run grunt command from terminal. It will generate svg-min, React (build), svg-sprite, pdf, php, and docs.
  5. Commit
  6. Merge & delete branch

Installing Automation Scripts

This icon set uses a few automation scripts to ease the generation of new icons in a reliable way. In short, we require node and grunt. For detailed instructions check the installation page.

Publishing to NPM

  • Follow install instructions
  • Check in changes if any and follow PR process.
  • Bump package version in package.json to the next desired version and add an alpha postfix 1.1.0-alpha.1
  • While testing changes publish using the next tag npm publish --tag next
  • If changes look good remove postfix in the version 1.1.0
  • Publish using the latest tag npm publish --tag latest

License

Gridicons is licensed under GNU General Public License v2 (or later).

FAQs

Package last updated on 15 Aug 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc