Stylized App Icons

Animal Crossing: New Horizons, a social-simulation game for the Nintendo Switch, has its own in-game phone with app icons. I wanted to understand what made that visual language work, and apply it to real apps you'd actually use on your phone, treating it as if it were a real client brief.

Process

I began by breaking down the game's icon system, noting these principals:

• Icons used a pastel palette

• Illustrations used uniform stroke widths

• Illustrations used small interior details within glyphs leaning towards illustrations

• Illustrations used a mix of flat modern UI-influenced icons and more illustrative real-world objects

From there I redesigned 35 apps with vectors in Figma, making case-by-case decisions about which approach fit each one. While many app icons maintained their identity even with the style change, I chose to omit a few I originally planned to redesign that I felt lost the brand identity with the new palette. I focused on style adaptation rather than just redrawing every app, so I also excluded any designs that felt too similar to the originals.

One detail I was deliberate about, as a fan: where the franchise offered a reference, I used it. The Telegram icon became a specific paper airplane that Animal Crossing fans would recognize from the Mario Kart collaboration. A happy easter egg that rewards people who know the source material!

Motion Process

While icons on real-world phones are static, the ones in the Animal Crossing world have animated hover states, so the next step was to create similar animations for my redesigned icons. As with the illustrations, the first step was studying the animation style to extract a set of guidelines.

Based on my observations of the hover states across the apps in the game, these were the three main principles I identified:

• Backgrounds have a moving textured pattern that relates to the app's purpose, with a few apps sharing the same background

• The glyph icons generally have a simple bounce, with exceptions for more unique icons

• The glyph breaks the app icon's border, adding a sense of depth

Timing for Messages

Sketches for Music

Sketches for Telegram

With some early ideas of how certain icons could animate, I put together a first draft, shown above. This was challenging for a couple reasons. First, Figma is better suited for micro interactions rather than more complicated animations. I was not used to animation in Figma without a proper timeline, onion skin, and the time measurement in milliseconds threw me off at first. I did some rough sketches in Adobe Animate and worked out timing in After Effects to compensate.

More importantly, looking back at the guidelines, the movements I had chosen didn't align with the animation style or the practical use case of a hover state. I went back, incorporated those principles more directly, and reworked the animations into something that matched both the visual style and the hover-state use case.

The final statics and animated icons are below. Thanks for reading!

This is personal project, not affiliated with Nintendo.