# ℹ️ Introduction
> Feel free to ask for help on [the Discord server](https://discord.gg/F9RFqHN) if anything is unclear
Hi! I see you've decided to contribute. That's great and there are a few ways to do so:
If you know how to make cool icons but don't know how to work with [git](https://git-scm.com/), [GitHub](https://github.com), and other tech stuff, just read [Design Guidelines](#-design-guidelines) carefully, make some icons and submit them on our Discord in the [icon review channel](https://discord.com/channels/743783969216135198/743784395856412782).
If you don't know how to make icons but you are tech-savvy, you can help improve our CI/CD, add missing ComponentInfos, and do other things. Read [Contributing](#-contributing) for more info.
If you can handle tech and design stuff, then please read this guide completely.
If you don't know any of that but want to try to make icons, we can help with some advice on our Discord. There are many tools, instructions, and guides for them that it’s impossible to describe everything, so the only thing you can do is search for information on the Internet and try it out.
In short, the suggested skills are:
- Basic knowledge of [git](https://git-scm.com/) and/or [GitHub](https://github.com).
- Some experience with vector editors.
- A little bit of a design sense.
We'll be happy to see you participate!
# 📝 Design Guidelines
## General Tips
- Keep it simple: fewer details and small elements, because the end result will only be a small element on the users screens.
- Your icon doesn't have to be a 1:1 copy of the original; improve and simplify where possible but at the same time try to maintain a recognizable appearance.
- Avoid outlining, otherwise the icon will stand out from the general style.
- Make the icon free-form if you can — it helps keep Delta a little more diverse.
- You can search for app logos online (they're often found on official websites; avoid icons with non-free licenses) and adapt them. If the original icon is too complex, you can use another recognizable element (an item, a faction icon, etc.) — this applies to any complex icon, not just games.
- Be sure to double-check that icons are centered and aligned, sized and exported correctly.
## Icon Template
### Rules
- Canvas size must be 192x192px. The template from [Resources](#resources) is correctly configured, just download it and you should be good to go.
- The icon size does not exceed template dimensions. Check out [the visual explanation](./resources/templates/template_tutorial.svg).
- If the original logo is simple and doesn't fill most of the template as a shape (circle, square, etc.), keep the logo size between 73–80px.
- The rounded corners of squares and rectangles have a corner radius of 10px.
- The template must be properly centered on the canvas.
### Tips
- If you're having trouble deciding whether to use geometric or optical centering, you can discuss it on Discord. Mostly it depends on the icon, but optical centering is usually your choice.
- If you have any doubts about the design of your icon, you can also discuss it on Discord.
### Resources
> You can also check out the [Figma icon template](https://www.figma.com/design/02aiFRSLkikcw8mpBAnoDA/Delta-Icon-Template?m=auto&t=qyLH05AMDzZwAI2s-1), if you're using Figma.
## Colors
### Rules
- Use $\textcolor{#56595B}{\textsf{⬤}}$
#56595B Davy's grey as default black.
- Use $\textcolor{#FF837D}{\textsf{⬤}}$ #FF837D Coral pink as default red and $\textcolor{#BA6561}{\textsf{⬤}}$ #BA6561 Fuzzy Wuzzy as default dark red. Shades of red are specifically for shading purposes and complex arrangements (if we're honest it's mostly complex anime / game icons overusing pink).
- Transparencies can be used as an overlay for additional shading. Please keep the use of them to a minimum. Try to get by with basic colors and greys as much as possible. If you do use transparency, it should be an overlay, never a background (the overall shape of the icon should not contain any semi-transparent areas).
- Gradients are more acceptable than transparencies, but the usage should still be kept to a sensible minimum (as noted above).
### Palette
| Greys | Basic | Reds | Skintones |
|---|---|---|---|
|
$\textcolor{#FFFFFF}{\textsf{⬤}}$ $\textcolor{#ECECEC}{\textsf{⬤}}$ $\textcolor{#D8D8D8}{\textsf{⬤}}$ $\textcolor{#D2D2D2}{\textsf{⬤}}$ $\textcolor{#CCCCCC}{\textsf{⬤}}$ $\textcolor{#B1B5BD}{\textsf{⬤}}$ $\textcolor{#A0A5AF}{\textsf{⬤}}$ $\textcolor{#979797}{\textsf{⬤}}$ $\textcolor{#83868C}{\textsf{⬤}}$ $\textcolor{#56595B}{\textsf{⬤}}$ $\textcolor{#4A4A4A}{\textsf{⬤}}$ $\textcolor{#000000}{\textsf{⬤}}$ |
$\textcolor{#FFD6D4}{\textsf{⬤}}$ $\textcolor{#FF837D}{\textsf{⬤}}$ $\textcolor{#BA6561}{\textsf{⬤}}$ $\textcolor{#D3B69A}{\textsf{⬤}}$ $\textcolor{#8E6F60}{\textsf{⬤}}$ $\textcolor{#FCECDC}{\textsf{⬤}}$ $\textcolor{#F8C18C}{\textsf{⬤}}$ $\textcolor{#FDF5D9}{\textsf{⬤}}$ $\textcolor{#F9DE81}{\textsf{⬤}}$ $\textcolor{#C39A54}{\textsf{⬤}}$ $\textcolor{#E0F4E0}{\textsf{⬤}}$ $\textcolor{#98DC9A}{\textsf{⬤}}$ $\textcolor{#71A372}{\textsf{⬤}}$ $\textcolor{#96DFD3}{\textsf{⬤}}$ $\textcolor{#73ADA4}{\textsf{⬤}}$ $\textcolor{#9ABEFF}{\textsf{⬤}}$ $\textcolor{#728DBE}{\textsf{⬤}}$ $\textcolor{#54688C}{\textsf{⬤}}$ $\textcolor{#ABABFF}{\textsf{⬤}}$ $\textcolor{#BD9AFF}{\textsf{⬤}}$ $\textcolor{#8C72BD}{\textsf{⬤}}$ |
$\textcolor{#FFB0AC}{\textsf{⬤}}$ $\textcolor{#F58F8A}{\textsf{⬤}}$ $\textcolor{#F4806D}{\textsf{⬤}}$ $\textcolor{#E85E5C}{\textsf{⬤}}$ $\textcolor{#DC505E}{\textsf{⬤}}$ $\textcolor{#B02A3C}{\textsf{⬤}}$ $\textcolor{#7A1B1C}{\textsf{⬤}}$ $\textcolor{#511119}{\textsf{⬤}}$ |
$\textcolor{#F1E9E0}{\textsf{⬤}}$ $\textcolor{#D6C8BA}{\textsf{⬤}}$ $\textcolor{#D4C6B8}{\textsf{⬤}}$ $\textcolor{#D7D0B8}{\textsf{⬤}}$ $\textcolor{#E2C9B0}{\textsf{⬤}}$ $\textcolor{#D4B79A}{\textsf{⬤}}$ $\textcolor{#BF9E73}{\textsf{⬤}}$ |
delta_icon_delivery. The component info would be dictated by the app itself and be akin to something like com.delta.delivery/com.delta.delivery.Actvities.MainActivity.