Welcome to the Lawnicons contributing guide!
In case of unclear wording, ask us in our Discord. If you find errors or want to suggest improvements in the guide itself, create an issue.
Contributors
The Lawnchair team is focused on development only. Our community (basically everyone who wants to) makes icons and sometimes touches the code too.
Development
The main tasks are to maintain Lawnicons and interaction with launchers, fix bugs, add new features and automate organizational processes. Please see our issues for more details.
Icons
You can contribute your icons, fulfill icon requests, add missing app IDs, refine and update existing icons, clean up dead apps and duplicates. Mastering the Lawnicons design guidelines in practice will allow you to do icon reviews.
Code-related contributions are welcome. Significant changes to the UI should be discussed in our Discord. Generally, we want to keep things clean and simple.
Visit the Lawnicons developer wiki for developer information regarding Lawnicons.
- Study the Lawnicons design guidelines in practice (for example, in Figma) and create a suitable icon (*.svg).
- Learn how to find the app ID that you will need to link with the created icon.
- Learn how to fork the Lawnicons repository and make a local copy for yourself, where you will add the created icon.
- Add the created icon and the app ID to your local copy and push the changes to your fork on GitHub.
- Create a pull request to the Lawnicons repository and wait for a review.
The contributors who laid the foundations: GrabsterTV and Chefski.
Tip
The design guidelines are also available in Figma, you can practice there.
View in Figma
The Lawnicons style is built on strong fundamentals and a commitment to quality. To minimize the need for rework, please read these guidelines carefully. Our main goal is to create high-quality icons that clearly represent their respective apps. To achieve this goal, you may sometimes need to redesign an icon from scratch.
Tips
- Make no more than 5 icons at a time, as long as your PRs require rework.
- Prioritize quality.
- Use the Lawnicons style, rather than trying to reproduce the original exactly.
- Practice on easy-to-make icons to understand the whole process.
- See how other contributors have made pull requests (PRs).
TL;DR
_2048.svg | 2048
lawnicons.svg | Lawnicons
habitacao_caixa.svg | Habitação Caixa
beijing_card.svg | 北京一卡通 ~~ Beijing Card
a_and_w.svg | A&W
App name
The main app name should be in its main language. It can be found in app stores or primary sources.
Apps with non-English names require an additional name based on the English alphabet. At best it will be a localized official app name. If an app name is mostly made up of letters from the English alphabet, it doesn't need an additional one.
Tips
- Add localized names if available.
- Transliterate non-English names when there are no localized ones.
- Separate app names using
~~. First, the main app name, then the additional one. - Delete things that aren't part of an app name.
- Use the HTML character references for special symbols: for instance,
&instead of "&".
Icon name (drawable)
Repeat the app name. Use a–z, 0–9, and _ for spaces. Insert _ before a digit at the beginning of an icon name.
Tips
- When multiple apps are linked to the same icon, choose the most popular app name for it.
- Replace non-English letters with English letters.
192 × 192 px. Use the correct canvas size to create a safe zone around icons.
Determine the abstract icon size before you start. The exact size is determined by the stroke's position, weight, and the graphic editor used. For a 12 px center stroke in Figma, the icon content area is 148 × 148 px.
Tips
- Follow the blue guides.
- Use existing icons as an example.
- Aim for pixel-perfect.
- The margin of error is
<0.1 px.
Determine the square icon size before you start. These are icons with 50% or more of the edges running along the square. The exact size is determined by the stroke's position, weight, and the graphic editor used. For a 12 px center stroke in Figma, the square icon content area is 142 × 142 px.
Tips
- Follow the golden guides.
- Use existing icons as an example.
- Aim for pixel-perfect.
- The margin of error is
<0.1 px.
All lines must be non-transparent black color: #000000.
Core stroke weight: 12 px
Minimal icons: 14 px
Dense icons: 10 px
Ellipses, rectangles and fine details: 12 px, 10 px, 8 px, 6 px
Tips
- No margin of error.
- Don’t use a fill.
- Remember to adjust the size of icons when you change the stroke weights.
Caps and joints should be rounded.
Use 6–32 px for 90° angles. Refer to the original icon to select a value from the range. It's allowed to leave a 0 px radius in cases when the others spoil the shape: for instance, when 90° angles are formed of short lines.
All shapes should be outlined.
Avoid drastic changes in stroke weights. For instance, using a 12 px stroke and suddenly decreasing it to 8 px creates an unbalanced visual effect.
Tips
- Use a gradual transition if it makes sense. For instance,
12 px→10 px→8 px. - Change the main stroke weight depending on an icon density.
Avoid black spots as much as possible.
Tips
- Trim lines.
- Reduce stroke weights.
- Simplify or redraw.
Keep at least 8 px between lines, using an 8 × 8 px rectangle to verify the spacing.
It’s better to make the distance a little more, especially in closed shapes.
Tips
- Move lines further apart.
- Combine parallel lines into one.
- Trim or extend lines.
- Reduce stroke weights.
- Enlarge original icons to make the main features easier to draw.
- Simplify or redraw.
Icons should be centered, but shape-aware. Align them to the optical center as much as possible within the icon content area. The optical aligment is where your icon looks and feels centered.
Text longer than 3 letters in 1 line usually don’t fit the Lawnicons style. Brands and apps with text icons often need to be studied in order to create a recognizable Lawnicons-style icon.
If you want to keep only a text, then it should be of high quality and occupy at least ¹⁄₃ of the icon content area.
First, try to make a complex icon based on the original. When it’s clear that the original icon can’t be conveyed in the Lawnicons style, you need to study the visual part of an app or a game. Whatever you come to, the result should be at least logical and high-quality.
Sources for creating a recognizable icon
- Branding guidelines.
- UI or gameplay.
- Website’s favicons.
- In-app icons.
- Essence of an app or a game.
- Combination of recognizable features and your own ideas.
Some minimal icons should be detailed based on an app design to become more recognizable. Add distinctive features to them when it makes sense.
Use one of our version badges to highlight a separate version of an app if the original icons are indistinguishable. For instance, it could be nightly builds, paid apps with a free one available, or lite versions. Keep in mind that cases such as Opera Mini or Firefox Klar are different.
Tips
- Create a safe zone around the version badge by cutting lines (refer to the Excessive density section).
- The default location for the badge is the lower right corner, but a lot depends on the icon shape.
- Avoid shifting icons for the sake of the badge.
- Create an issue if there aren’t enough version badges.
To create icons, you need a vector graphics editor, which allows you to save icons in SVG format. Mobile vector editors won't work. We recommend Figma because it has easier quality control. You can use Advanced SVG Export to save optimized SVGs in Figma.
You can use it to create a local copy of your repository on GitHub and upload all the changes. Before getting into your repository, the changes must appear in your local copy.
You can use it to find app IDs. If you fulfill icon requests from our table, all the app IDs are there.
File explorer. It will help you copy icons to a local copy of your repository.
Text editor. It will help you to link icons and app IDs in appfilter.xml. This is how icon packs work.
Terminal (command line). It will add convenience if you regularly contribute dozens of icons.
An app ID is a record consisting of a package and an activity, separated by /. App IDs allow you to link icons and apps.
Sample (Lawnicons)
Package: app.lawnchair.lawnicons
Activity: app.lawnchair.lawnicons.MainActivity
App ID: app.lawnchair.lawnicons/app.lawnchair.lawnicons.MainActivity
Lawnicons
This method is suitable if you are interested in installed apps that aren't supported in Lawnicons.
- Install and open Lawnicons.
- Long press our logo.
- Swipe down.
- Copy missing app IDs to clipboard.
- Save it wherever it's convenient.
Icon Request
- Download and launch Icon Request.
- Tap one of the options:
- UPDATE EXISTING — to copy app IDs.
- REQUEST NEW — to save icon images and app IDs. This option is better if you are creating icons.
- Use the Icon Request toolbar to select apps.
- Copy, save or share.
Icon Pusher
- Download and launch Icon Pusher.
- Select the icons you want to upload or select all by pressing the square in the top right.
- Submit the selected apps.
- View your submission on the Icon Pusher website.
Android Debug Bridge (adb)
- Connect your Android device or emulator to your laptop/desktop PC that has
adbinstalled. - Open the app whose details you want to inspect (e.g. Telegram).
- Open a new Command Prompt or Terminal window and input
adb devices. - Finally, type the below-given command to get the information about the currently open app.
Mac or Linux
adb shell dumpsys window | grep 'mCurrentFocus'Windows
adb shell dumpsys window | findstr "mCurrentFocus"
You need to link SVGs and app IDs correctly, create a PR to our repository through your fork, and wait for it to be reviewed.
Tips
- Avoid name conflicts.
- Add missing app IDs to icons that are identical to the originals.
- Make sure your icons or missing app IDs haven't been added earlier: search the
appfilter.xmland check PRs.
Simplified icon contribution • How to find app IDs • Icon contribution tools • appfilter.xml • PRs
Let's imagine that you have an icon in SVG format, an app name and an app ID.
Icon: lawnicons.svg
App name: Lawnicons
App ID: app.lawnchair.lawnicons/app.lawnchair.lawnicons.MainActivity
- Fork the Lawnicons repository.
- Clone the fork via GitHub Desktop.
- Open it with a file explorer. This is your local copy.
- Сopy
lawnicons.svgto thesvgs/folder. Note the icon name. - Open
app/assets/appfilter.xmland add a new line using the same template as the existing lines.
Do
<item component="ComponentInfo{app.lawnchair.lawnicons/app.lawnchair.lawnicons.MainActivity}" drawable="lawnicons" name="Lawnicons" />
Template
<item component="ComponentInfo{APP_ID}" drawable="ICON_NAME" name="APP_NAME" />
- Save changes and push it to your fork via GitHub Desktop.
- Open your fork in a web browser and create a PR:
Contribute → Open pull request. Describe your PR according to our templates. - Make sure that the build went without errors and await a review (better to do a self-review).
- We will merge your PR, fix the little things, or leave a comment asking you to rework.
Clean commit history
A commit history appears after your PR is merged. Please keep your repository up to date if you plan to create more than one PR, otherwise you may drag the commit history through all your PRs. There are two main ways to do this:
- Open
Terminalon the local copy of your repository via GitHub Desktop. Rungit reset --hard upstream/develop. Overwrite your repository with your local copy via GitHub Desktop:Force push origin. - Or delete your repository and start the contribution process from scratch.
This tool will help you if you regularly contribute icons or missing app IDs.