GeezerVison is showing github.com — Need icon design guidelines · Issue #171 · feathericons/feather
Need icon design guidelines #171DescriptionI see it as part of the roadmap and high up in there. Creating this ticket so that one can know once the guidelines are live.
Please close this ticket once the guidelines are published. Reacted by Cole Bemis, Jori Lallo, Sebastian Klein, Iakov Pustilnik, Cameron Green, Miguel Solorio, moeenio, Allan R. A. Barcelos, Philipp Bosch, Timothée Goguely and 9 more ActivityShaneNZ commented on Oct 24, 2017 Working to get a setup for SVGO that post-processes SVG output into a nice clean form, ready for inclusion - I think this should be a part of the guidelines. Do you have any recommendations on configuration/setup? Please tell me I don't have to hand modify each SVG icon output :) ShaneNZ commented on Oct 25, 2017 OK, realised that it's part of the build process, but still would be good to be submitting decent, clean SVG files in the first place. Any specific requirements, needs? Got it down and clean now, although I do have an extra container around all my shapes that I can't seem to get rid of. colebemis commented on Jan 17, 2019 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
Reacted by Cameron Green, Ash Guillaume, Miguel Solorio, moeenio, Yashu Mittal, Luke Deen Taylor, Alex Autem, Jake, Kit, Naoufel Tarchoul and 21 more Reacted by Yashu Mittal and Lucas Bonomi Reacted by moeenio, Yashu Mittal, Lucas Bonomi, Laurin and Jan Reacted by Cameron Green, Yashu Mittal, moeenio, Christine Bath, Clayton Dewey, Christian Martinez, Lucas Bonomi, Laurin, Lennard Scheibel and Muh Daffi Reacted by moeenio, Yashu Mittal, Lucas Bonomi, Laurin and Jakob Reacted by Yashu Mittal, rienkkk and Lucas Bonomi NaoufelTarchoul commented on Sep 5, 2019
Icons should have a 1px empty “safe zone” on the edges of the canvas:
I just opened some icons in Illustrator. None of them seem to respect this 1px safe zone 🤷🏽♂️ moeenio commented on Sep 7, 2019 @naoufel-ui This rule can be broken case-by-case. Reacted by Naoufel Tarchoul JanTrichter commented on Jun 18, 2021 Is there something like an Illustrator template which has all the required settings and a small example? Would like to add some icons to a website that need to match the feather icon style but I find it hard to set up everything correctly. moeenio commented on Jun 18, 2021 Feather is not getting anything new, but you can ask over at @lucide-icons. JanTrichter commented on Jun 19, 2021
Feather is not getting anything new, but you can ask over at @lucide-icons.
I don't want to add anything "new" to the icon set. I wanted to add some icons which I need for my own project and I need them to fit the feather guidelines because I am already using Feather Icons. But thanks for your answer, always good to know :) Have a good day! moeenio commented on Jun 19, 2021 You asked for an Illustrator template, it may exist in lucide at some point, if you ask ;) JonathanNathanson commented on Aug 22, 2022 Hi,
Does anyone know how to add a new icon to the react-feather package? It would be great to know the method as I need the £GBP symbol in react-feather. It's a great library! Just missing a couple of key icons for my usage.
Thanks,
Jonathan
MetadataMetadataDevelopmentNo branches or pull requestsIssue actions
|
