Skip to content

Commit

Permalink
Small refinements of the Lawnicons docs (#2328)
Browse files Browse the repository at this point in the history
* Small refinements of the GitHub docs

* Update icon_checklist.md

* Update icon_checklist.md

* Update icon_checklist.md
  • Loading branch information
x9136 authored Sep 13, 2024
1 parent 4b8cc3a commit bfb6381
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 5 deletions.
6 changes: 1 addition & 5 deletions .github/icon_checklist.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,22 @@
Thanks for your contribution!

While waiting for a review from our team, you can do a self-review to ensure that your icons are suitable for Lawnicons.
We try to do the review within 7 days. While waiting for a review from our team, you can do a self-review to ensure that your icons are suitable for Lawnicons.

### Canvas and sizes
1. Canvas: `192×192px`.
2. Non-square icons: the long side of the icons should be `160px`.
3. Square icons: `154×154px`.
- [ ] Approved by the Lawnicons reviewer
### Color, stroke width and rounding
1. Color: non-transparent black `#000`.
2. No fill. Base stroke width: `12px`. `14px`, `10px`, `8px` — depending on the shape of the icons. `6px` — for fine details.
3. Rounded ends and joins. 90° corners are rounded by `6-32px`.
- [ ] Approved by the Lawnicons reviewer
### Naming
1. Names should match the official app name and contain no additional text.
2. If the first `3` characters of the app name contain letters not from the English alphabet, then add a localized (or transliterated) name via `~~`. Example: `京东 ~~ JD`.
3. The names of the drawables should repeat the names of the apps if nothing prevents it.
- [ ] Approved by the Lawnicons reviewer
### Quality
1. Ensure that icons are easily recognizable.
2. Align icons to [the visual center](https://crazybitsstudios.com/another-way-of-aligning-elements-when-creating-icons) as much as possible within the guidelines. The visual center is where your icon looks and feels centered.
3. Avoid noticable black spots by reducing the stroke width or simplifying the icons.
4. Avoid close distances between strokes. The icons on the phone screen will be smaller, so the small distances between the strokes will stick together.
5. Avoid drastic changes in stroke widths. When the strokes next to each other differ in width by 4px or more, the icon will look sloppy.
- [ ] Approved by the Lawnicons reviewer
4 changes: 4 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ For additional information on designing icons and samples, see [the Lawnicons Fi
Need help? [Join Lawnchair on Discord](https://discord.com/invite/3x8qNWxgGZ).

### TL;DR on icon design

> [!NOTE]
> Upload no more than 10 icons at a time, because reviewers only have time for small pull requests.
The canvas is `192×192px`. The content area for most icons is `160×160px`, meaning the long side of an icon should be `160px`. Square icons should be `154×154px`. No fill, the stroke width is `12px`. All shapes should be black `#000` with rounded ends and joins. Round 90° angles by `6-32px`. Avoid noticable black spots, close distances between strokes, and drastic changes in stroke widths. Simplify details, but don't lose recognizability. Provide original and localized names, so the icons can be found.

To avoid rework, save time and understand the limitations of the guidelines, it is worth reading reviews (e.g., [+8 icons, +1 link, +4 updates](https://github.com/LawnchairLauncher/lawnicons/pull/1865)) and creating 5-10 icons in the first contribution.
Expand Down

0 comments on commit bfb6381

Please sign in to comment.