Leveraging a Web Component For Comparing iOS and macOS Icons
Whenever Apple does a visual refresh in their OS updates, a new wave of icon archiving starts for me.
Now that “Liquid Glass” is out, I’ve begun nabbing the latest icons from Apple and other apps and adding them to my gallery.
Since I’ve been collecting these icons for so long, one of the more interesting and emerging attributes of my collection is the visual differences in individual app icons over time.
For example: what are the differences between the icons I have in my collection for Duolingo? Well, I have a page for that today.
That’ll let you see all the different versions I’ve collected for Duolingo — not exhaustive, I’m sure, but still interesting — as well as their different sizes.
But what if you want to analyze their differences pixel-by-pixel? Turns out, There’s A Web Component For That™️.
Image Compare is exactly what I was envisioning: “A tiny, zero-dependency web component for comparing two images using a slider” from the very fine folks at Cloud Four. It’s super easy to use: some HTML and a link to a script (hosted if you like, or you can vendor it), e.g.
<image-compare>
<img />
<img />
</image-compare>
<script src="https://unpkg.com/..."></script>
And just like that, boom, I’ve got a widget for comparing two icons.
For Duolingo specifically, I have a long history of icons archived in my gallery and they’re all available under the /comapre route for your viewing and comparison pleasure.
Wanna see some more examples besides Duolingo? Check out the ones for GarageBand, Instagram, and Highlights for starters. Or, just look at the list of iOS apps and find the ones that are interesting to you (or if you’re a fan of macOS icons, check these ones out).
I kinda love how easy it was for my thought process to go from idea to reality:
- “It would be cool to compare differences in icons by overlaying them…“
- “Image diff tools do this, I bet I could find a good one…“
- “Hey, Cloud Four makes a web component for this? Surely it’s good…”
- “Hey look, it’s just HTML: a
<script>tag linking to compiled JS along with a custom element? Easy, no build process required…“ - “Done. Well that was easy. I guess the hardest part here will be writing the blog post about it.”
And I’ve written the post, so this chunk of work is now done.