Animating the nav menu icons

[corywatilo]

In thinking about ways to make the product experience increasingly more delightful, it could be fun to animate our navigation icons.

When clicking a nav link:

• Create a "pressed" active state, where the button slightly shrinks in size (a la Facebook buttons)
• A subtle, short animation (.5s - 1s) when the mouse is released

Example ideas:

• Dashboards: tachometer moves slightly higher (like a gauge about to burst / noise meter example)
• Insights: Bar heights adjust
• Feature flags: flag waves once
• Experimentation: beaker has bubbles come out from the top
• Web performance = steam from coffee cup "wiggles"
  etc

[lottiecoxon]

How do I access these icons btw? are they ANT?

[clarkus]

The icons are all based on material icons. Some are edited, so it's best to work from the navigation example in figma. I can help you get any icons you need, too. They're all in SVG format.

[lottiecoxon]

smashing Thanks Chris!

[corywatilo]

Also worth discussing unifying icon styles between what we're using in marketing vs product. (Personally I'm a little biased toward the multi-tone ones I've been using since they're a little more "custom"...)

[clarkus]

Also worth discussing unifying icon styles between what we're using in marketing vs product. (Personally I'm a little biased toward the multi-tone ones I've been using since they're a little more "custom"...)

I'm a fan of just enough icons. They're great for features and for some things that need to be more prominent / personalized. That said it's really easy to get into a scenario where not having an icon makes something feel out of place. I think it'd make sense to align icons used for features and for prominent upsell / empty states. I'm planning to reduce icon usage in other areas. It's just too easy to become reliant on those instead of clear labeling. Plus we have some very nuanced subjects in our product that aren't always easy to make an icon for.

All that said, icons used in product are based on a 24px square viewbox. Within this frame, the vector portion of the icon is usually 18px square or smaller. There are exceptions, but generally icons are always 2–4px from the viewbox edge. Everything is using an outlined style right now - nothing solid / dense as it typically outcompetes the adjacent label. This could change, but I'd want whatever icons we use to work well adjacent to text. In empty states icons can size up to 56px square viewboxes / frames. Everything is based on an 8px grid, so sizing up / down in multiples of 8 should be fine.

I have some placeholders for icons at https://www.figma.com/file/Y9G24U4r04nEjIDGIEGuKI/?node-id=2028%3A808 but they're not quire ready for work yet. There is some documentation on the grid sizing there, too.

[posthog-bot]

This issue hasn't seen activity in two years! If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in two weeks.