+3 icons

[Pratham-T]

Description

Added icons for 3 apps. Contributing icons for first time, let me know if any changes are required.

In particular, the following choices were made by me:

• 3D Calculator corner radius as 12px instead of 6px which made it look more visually consistent with other icons in the examples.
• HungerBox Cafe shapes above the bowl as filled due to their small size. The filled shapes are drawn a bit smaller than the original logo as when they were made to scale, they made the logo very dense.

Icons addition information

Added

GeoGebra 3D Calculator (org.geogebra.android.g3d/org.geogebra.android.privatelibrary.splashscreen.SplashScreenActivity)
HungerBox Cafe (com.hungerbox.customer.common/com.hungerbox.customer.prelogin.activity.MainActivity)
Entrust Identity (com.entrust.identityGuard.mobile/com.entrust.identityGuard.mobile.MainActivity)

Contributor's checklist

• I followed the Lawnicons guidelines and will make changes if someone suggests. I will also make sure that Lawnicons builds correctly.

[github-actions]

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.

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.

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.

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.

Quality

1. Ensure that icons are easily recognizable.
2. Align icons to the visual center 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.

[x9136]

In the screenshot, you can see that only the first icon has the correct size.

Try to make icons without fills and masks. This way they will fully comply with the Lawnicons guidelines. They will be easy to check and change if ever needed.

HungerBox Cafe shapes above the bowl as filled due to their small size.

For example, you can create a 12×12px square with 12px stroke width instead of the square with a fill.

[Pratham-T]

Thanks for the feedback. I enlarged the icon in Entrust Identity. And tweaked the HungerBox icon a bit. After enlarging the bowl below, the shapes above it proportionately scaled looked good in strokes of width 10px. Kindly review if it is upto Lawnicons guidelines.

New image for reference:

Thanks!

[Pratham-T]

As an aside, especially I feel that the shapes in the HungerBox icon look visually different in size due to the negative space inside being different for different shapes. Let me know if I should change them so that the whitespace inside each is uniform.

[x9136]

I feel that the shapes in the HungerBox icon look visually different in size due to the negative space inside being different for different shapes.

You can balance the top part of the icon better if you want.

I would increase the height of the icon to 160px ± 0.05px. It is also worth moving the bottom part slightly to the left so that it is in the center.

[x9136]

However, I won't be able to accept icons created with masks because the masks result in jagged lines as far as I can see.

[Pratham-T]

However, I won't be able to accept icons created with masks because the masks result in jagged lines as far as I can see.

Interesting since I did not explicitly use masks. Saw the svg code and somehow Figma is making closed path's strokes which are aligned as inside instead of center as a mask. (Sorry not a frequent figma user, if this was a common knowledge)

I re-made 3D calculator icon. Check if the jagged-ness issue is now resolved or not, since no masks in the svg code this time.
If this one is fine, I'll remake the other two over the week when I get time free.

[x9136]

Check if the jagged-ness issue is now resolved or not, since no masks in the svg code this time.

Everything is smooth.

[x9136]

Great, thanks!

[Pratham-T]

Thanks. I see that you made some tweaks before merging. Would love to hear feedback about what was off, if you're free ofc.

[x9136]

Would love to hear feedback about what was off, if you're free ofc.

entrust_identity.svg – the icon size was smaller than needed.
geogebra_3d_calculator.svg – the icon was smaller than needed. It also looked shifted down due to the emptiness at the top, I took this into account. https://crazybitsstudios.com/another-way-of-aligning-elements-when-creating-icons
hungerbox_cafe.svg – the semicircle was shifted to the right, I moved it to the center. At the same time, I also slightly increased the distances between the icon elements so that they stick together less on the phone screen.