Rive icons design examples

For the ones who came for .riv link. You can download icons here. All icons have "light", "dark" and "strict white" (for placing over accent background) variats.

Various studies show that animation attracts attention. But I bet you know it without any boring white papers. Almost certainly you experienced clicking a button on some website that was followed by some movement and for some reason it pleased your brain. We've all been there.

Speaking specificaly about microinteractions, they serve another purpose: sustaining an illusion that your webside/app is instant. By default you have about 200 milliseconds at max to spend on default button scale animation. On top of that you have about 100 "free" milliseconds just cause our brain is slow. If some action finished within 300ms time span user keep feeling effect of "continuity". This triggered action feels like instant. Unfortunately, not all actions finish that fast. Network loads, database queries, just inefficient code (hello fellow developers) - this all adds up.

What if we simply try to play default button animation longer? It quickly starts to look off. The best animation is always the onle that looks like something would've happen in real life. Button animation below 100ms is too fast. From 100 to 200 milliseconds it feels "about right". Something as simple as scale that takes more than 200ms is recognized as "slow" by our perception.

Try to click on buttons yourself:

But we can apply simple trick. Make button animation not just single-step-scale, but something a bit more complicated and we can trick our brain to not feel "gosh it is slow" anymore. Let's take an example:

How much time does this one take? Well, scale animation starts instantly after click. That gives the perception of "instantinuity". Then, 20ms later icon animation starts to play. Icon animation lasts for 500ms. That's 520ms so far. Then, our wiggle room that we get for free is actually relative. When animation lasts for 200ms we only have 100ms "for free". But with animation taking longer we can wiggle even more. With that example it is 150ms.

In total, interaction lasts for 20 + 500 + 150 = 670 milliseconds. That is almost thrice more than we initially had! 670ms is huge amount of time in the world of iPhone 16 and 5g (readers from the future, you should experience even better world 😉). Average load time of full page in this blog is about 400ms. Imagine what you can do with 670.

There are several basic ways you can animate icon. I will put next sentence in important block so you'd notice.

That gives us following techniques:

Scaling is the basic building block that we can combine with everything. Scale whole icon, just it'st of "by layer" one after another for bouncing effect.

It is available for all SF Symbols in apple platforms and gives the most consistency. But just scaling is still simple. It is the same thing we started with, just applied to an icon, not a whole button.

We definitely can do better. So let's combine some effects!

We scaled each "day" entry separatedly and additionally wiggled whole icon to the bottom and back. Practicing, I played with different timing approaches. My desire is to cleate both simple enough animations to pack into small icon size but keep them not boring!.

So when I develop icon animations I try to gradually remove certain animation parts and check if "whoah 😮" effect still stands. For this calendar icon we can try different combinations.

Here are the variants, from left to right:

Another technique that we can use is very interactive and really visible even on small scale. If icon has multiple parts, e.g. some stick or bar or wand (let's call it "thing") framed in some shape (and call this one... well.. "frame"). We can extrapolate the flow of this "thing" furher, causing some kind of "swoosh" effect. Here are some good examples:

All this icons are different variations of the same general approach. "Let's swap one instance with another".

1st and 4th icons are the simplest case that's clearly visible. One pencil replaces the other, nothing more. Other icons have a bit more "spice", but generally the same thing happens there!

Example with book replaces the "book spine" with another one. But actually does it twice during the course of animation. It happens quickly so everything smoothens out.

In "radiowave" inner wave pushes outer wave, outer wave disappears and new inner wave is created inside instead. So one instance of "thing" is being swapped and other instance is transformed to take it's place.

The rightest "tray" simultaneously replaces tho instances of "thing" with another two instances.

See how many variations are there? This concept applies well in different situations. There are certain cases where I'd advise to avoid using it though:

There are no many examples where this can be applied. The generic ones is when you have some small element in icon.

It usually serves as good cherry on top of simple icons where you can't really do instance swap because element is too small. So,

There is another approach that can lead you further. Following @rive_app on Twitter, I always were curious who's behind this "Love, Death and Robots" intro style in their posts. And just as I was writing this article, @SloppyJ44 dropped a great example of "go-to" small blinks that you can implement:

Expecially interesting are "stroke-n-fill" and "slide-n-blink" that somewhat stay within the style and fit into size constraints. "Color flash" also looks amazing, but I would look weird to have this animation in some icons but not others which make it a bad candidate.

Designing interactive icons is both an art and a science. It requires a balance between creativity and technical constraints. By leveraging techniques like scaling, wiggling, instance swapping, and strategic blinking, we can create micro-interactions that not only catch the user's eye but also enhance the overall user experience. Remember, the goal is to make your interface feel responsive and alive, even when there are inevitable delays in processing. As you experiment with these techniques, always keep in mind the context of your application and the expectations of your users. So go ahead, bring your icons to life!

Aaaand... smile!