Layered App Icons

[stuartbreckenridge]

[KZeni]

I took a shot at making the icon layered across all platforms & style variations.

I've exported it as PNGs from Icon Composer for a quick preview here (all platforms & appearances at 1024@1x with -45º lighting [the satellite elements otherwise have reactive lighting, blur, etc.])

Default

Dark

Clear Light

Clear Dark

Tinted Light

Tinted Dark

watchOS (since macOS & iOS are shared for everything else)

[KZeni]

To help have the icon be open-source & available as well, here's everything I used to create the updated icon set.

I've included everything I used to make this in a zip (since .icon files, etc. can't be attached here directly): NetNewsWire Liquid Glass Layered Icon.zip (~7MB; actual Icon Composer .icon file is ~1.2MB since most of this is additional references/resources [with the vast majority of that being the public domain globe vector that was used.])

This zip includes (in order of use/creation when making the icon set):

1. Blank_Map_World_Secondary_Political_Divisions.svg (this is a public domain SVG of the world's contenents/counties via https://commons.wikimedia.org/w/index.php?curid=42276284.) *Not actually used in the resulting .icon file.
2. Prepped Blank_Map_World_Secondary_Political_Divisions.svg (removed the background from the original world SVG & flattened shapes/layers.)
3. NetNewsWire 6 Icon_1024x1024.af (put the current NetNewsWire 1024 icon into Affinity, separated out the satellite elements into layers, and converted those into SVGs which are listed below.) *Not actually used in the resulting .icon file.
4. solar left.svg (the left solar panel as SVG)
5. solar right.svg (the right solar panel as SVG)
6. satellite receiver.svg (the satellite tip as SVG)
7. satellite dish.svg (the satellite dish as SVG)
8. satellite core.svg (the satellite core as SVG)
9. NetNewsWire Liquid Glass Layered Icon.icon (the actual Icon Composer .icon file that's been prepped with the various layers/styles/behaviors/filters/etc.)

[KZeni]

Curious if there's feedback on what's been put together here. I tried to keep the overall style/charm/familiarity of the current icon (color matched, etc.) while modernizing & adapting to different styles/platforms as needed while vectorizing everything along the way (also hopefully future-proofing how the .icon file was set up for the mono style if Apple happens to add an icon variant with the glass background [a-la the current mono-color glass] while retaining the colors of key icon elements.)

It'd be great to see this be used in the upcoming version, but I can also see it being updated/etc. as needed (wanted to share all of the working files if I'm unavailable to make any proposed updates myself, etc.) 👍

[sjehuda]

These are based on the files of "NetNewsWire Liquid Glass Layered Icon.zip"

The embedded "base64" objects were transformed into SVG directives.

[sjehuda]

Background.

Optimized.

[KZeni]

The embedded "base64" objects were transformed into SVG directives.

[...]

Nice! Yeah, Affinity's trace to vector was convenient for that initial svg, and optimization is always welcome.

Replacing/optimizing the map SVG in the icon I first shared (it was simply the best public domain map svg I found after a quick search) could lead to the most impactful size reduction. I may find some time to improve this aspect for the layered icon.

[sjehuda]

I have included my version to my project, and added NetNewsWire as a recommended RSS software.

https://git.xmpp-it.net/sch/Rivista/src/branch/main/rivista/data/source/help/rss.rst

https://git.xmpp-it.net/sch/Rivista/src/branch/main/rivista/data/graphics/netnewswire.svg

I will be glad to replace it, when a better version be offered.

[KZeni]

Okay, I wish I would've just found https://commons.wikimedia.org/wiki/File:Continents.svg initially.

The .icon file is now ~74KB instead of ~1.2MB with a simplified world continents SVG (still public domain via https://commons.wikimedia.org/wiki/File:Continents.svg.) Everything's still vector.

Default

Dark

Clear Light

Clear Dark

Tinted

Tinted Dark

watchOS

Oh, and here's preview of mono/glass & tinted variants on a background.

Clear Light

Clear Dark

Tinted Light

Tinted Dark

*Tint color adjusted in these previews (compared to previous) to show how it might adapt to user preferences.

[KZeni]

This is the resulting ZIP of the optimized icon: NetNewsWire Liquid Glass Layered v2.zip (~4.1MB instead of ~7MB with all of the resources & working files; again, the .icon is now ~74KB instead of ~1.2MB)

Essentially, Continents.svg (not used in the icon) replaced Blank_Map_World_Secondary_Political_Divisions.svg and Prepped Continents.svg replaced Prepped Blank_Map_World_Secondary_Political_Divisions.svg (with a new resulting NetNewsWire Liquid Glass Layered Icon.icon file.)

[sjehuda]

On Thu, 13 Nov 2025 20:54:23 -0800 Kurt Zenisek @.***> wrote:

KZeni left a comment (Ranchero-Software/NetNewsWire#4660)

Okay, I wish I would've just found https://commons.wikimedia.org/wiki/File:Continents.svg initially.

The .icon file is now ~74KB instead of ~1.2MB with a simplified world continents SVG (still public domain via https://commons.wikimedia.org/wiki/File:Continents.svg.)

Perhaps it be best to use the map of "Alexander Gleason’s map of the world" which is that of the organization UN and of the government organization USGS of USA.

I think that it is the best to implement, because its design fits to logos, and icons.

[KZeni]

@sjehuda Yeah, I simply kept the map style that was used in the original icon (fitting a bit more into view in the process), but that really is focused on the western hemisphere (is that a big deal? Probably not since that's all that fits while making it full height, and having it so people quickly recognize it as the world is more important than trying to show every country/continent [it's depicting a satellite being viewed from above so it's not like that'd be able to show the whole world in reality, either.])

When it comes to using Alexander Gleason’s map of the world, while it addresses the hemisphere concern, that introduces new issues which probably aren't worth the trade-off. This original map style is nice in how much of the satellite is simply covering up the atlantic ocean whereas the AG style would have much more land mass being covered. On top of that, there's a familiarity of a traditional map style where it's recognizable as the world (which is the main goal; also fits better when one envisions what viewing a satellite from above might show) even if it's focusing on a particular hemisphere whereas the AG style might take a second for people to recognize what they're looking at as it's simply less commonly seen (doubly-so when the satellite graphic is then covering up much of it, too; and also breaks away from the expectations based in reality of what viewing a satellite from above would actually show.)

As such I'll leave it as-is.

[sjehuda]

That really is focused on the western hemisphere.

I did not even think of it. This is not a concern.

Because the dish object covers a significant portion of that map, I figured that the "war" or "statistics" map would be easier.

The map can be enlarged, out of lines, or roateted, to reveal more of it.

Nevertheless, either be fine.