Loading video...

Video Failed to Load

Go Home

Icon swapping vs. icon morphing

181,818 views • 3 months ago •via X (Twitter)

42 Comments

anirudh madhavan's profile picture
anirudh madhavan3 months ago

i found this by @benjitaylor its awesome too

Sebastiano Guerriero's profile picture
Sebastiano Guerriero3 months ago

@benjitaylor pretty cool!

Anthony's profile picture
Anthony3 months ago

Love both. This specific example really works well for the morph, but not all icons would be so easy to pull off.

Sebastiano Guerriero's profile picture
Sebastiano Guerriero3 months ago

Yep morphing is usually more complicated

Uday Mungalpara's profile picture
Uday Mungalpara3 months ago

Icon swapping look much better

Sebastiano Guerriero's profile picture
Sebastiano Guerriero3 months ago

My favorite too

LottieFiles's profile picture
LottieFiles3 months ago

Morphing wins every time for us, it just feels so much more intentional 👌 Do you find morphing gets harder to pull off?

Sebastiano Guerriero's profile picture
Sebastiano Guerriero3 months ago

Yes, morphing is usually more complicated, but it is satisfying 👌

LottieFiles's profile picture
LottieFiles3 months ago

Which one do you like better?

Hannan's profile picture
Hannan3 months ago

I think none of them makes a large difference. We should focus on one which takes less time to build. Am I right?

seb-astian's profile picture
seb-astian3 months ago

icon swapping gives a much clearer distinction between the scales and it takes way less time to design and develop also screens are super simple. for most products it will prob just instant swap to the progress ring

Hardik Kumar's profile picture
Hardik Kumar3 months ago

Looks great! One piece of advice: the tick forms in reverse which looks a bit jarring. The morph to signal complete can feel better if it starts from the small part of the tick.

Sebastiano Guerriero's profile picture
Sebastiano Guerriero3 months ago

good point!

Drew's profile picture
Drew3 months ago

Swap's easier to see the transitions between states.

Michal Muller's profile picture
Michal Muller3 months ago

Absolutely love both. Huge fan of @nucleoicons

Sebastiano Guerriero's profile picture
Sebastiano Guerriero3 months ago

@nucleoicons Thanks Michal! 🙌

Nico Andrade's profile picture
Nico Andrade3 months ago

Magic

SamTech's profile picture
SamTech3 months ago

lovable

Gus's profile picture
Gus3 months ago

Morphing it's just alive 🤩

Ankur's profile picture
Ankur3 months ago

how???

gsimone's profile picture
gsimone3 months ago

morphing reads as very noisy and clunky to me, especially with two icons so morphologically distinct

Aniket Pawar's profile picture
Aniket Pawar3 months ago

Swapping looks best

Motvion's profile picture
Motvion3 months ago

Nice work!

adeeb's profile picture
adeeb3 months ago

morphing goes crazyyy imo

Adarsh's profile picture
Adarsh3 months ago

Really cool

Stefan Andrei's profile picture
Stefan Andrei3 months ago

Morphing looks clean asf

AkinAyo | UI/UX Designer's profile picture
AkinAyo | UI/UX Designer3 months ago

amazing work

Rakibur Rahaman's profile picture
Rakibur Rahaman3 months ago

how to get this?

Cherif Tabouche's profile picture
Cherif Tabouche3 months ago

Love the animation!

Fahad's profile picture
Fahad3 months ago

ok, that’s pretty cool!

Black Eyed Hat Man's profile picture
Black Eyed Hat Man3 months ago

Superb that you're sharing these valuable insights because it's good to see superb design 🧠

Bakemono (Fra) 👹's profile picture
Bakemono (Fra) 👹3 months ago

Ufff smooth

Валера в Тбилиси 🌈's profile picture
Валера в Тбилиси 🌈3 months ago

How about: posting slop vs doing some work or something

Nobojit Halder's profile picture
Nobojit Halder3 months ago

The left one feels more nice on the eyes.

PlayPrism's profile picture
PlayPrism3 months ago

Icon swapping is better

thicodes's profile picture
thicodes3 months ago

The left

Ayush.'s profile picture
Ayush.3 months ago

swapping personally

Rakesh's profile picture
Rakesh3 months ago

i like morphings

jawad's profile picture
jawad3 months ago

Swapping is cleaner

pony's profile picture
pony3 months ago

morphing looks better

Sebastian Buzdugan's profile picture
Sebastian Buzdugan3 months ago

morphing looks smoother but swapping is safer when screen readers need stable labels

Aditya P.'s profile picture
Aditya P.3 months ago

curious about where people actually use such heavy animations. the enterprise desktop or web apps usually rely on static icons. i am guessing mobile applications?

Related Videos

ICON ICON I I I I
0:51

Sensitive content

ICON ICON I I I I

anty

74,693 views • 1 year ago