Okay, here's my first stab at some guidelines. I'll continue to update this comment as I have time, then move it into a markdown file when I feel like it's mostly complete.

Constraints

These are strict constraints of the system and cannot be broken.

Every icon fits in a 24x24 canvas.
Every line and shape has a 2px center-aligned stroke with round joins and round caps.
No fills.

Guidelines

These are general guidelines that help create consistency but can be broken on a case-by-case basis.

90° corners should have a 2px radius:

Icons should have a 1px empty “safe zone” on the edges of the canvas:

Distinct elements of an icon should be seperated by at least 2px of empty space:

Icons should have similar "optical volumes:"

Good	Bad

See the "Grid and Optical Volume" section of Nucleo's Icon Guidelines.

Project Setup

# Clone the repo
git clone https://github.com/feathericons/feather.git
cd feather

# Install dependencies
npm install

# Run `all` script to make sure everything is set up properly
npm run all

# If the `all` script completes successfully, you're good to go!

Adding an Icon

Export the icon as an SVG from Figma/Illustrator/etc.
Create a new local branch
Place the SVG in the icons directory
Run npm run build
Commit the SVG file
Open a pull request

Need icon design guidelines #171

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions