Overlaying 2 icons for a favorite component


I am creating a meditation app. I would like to add a “Favorite” feature: when a user is listening to a song, he can add it as a favorite song and when a song is already a favorite one, the user can remove it from favorites.
To do that, I would like to do like normal apps (like Spotify):

  • When the users clicks on the empty heart icon, the icon disappears (with the “Sometimes visible” feature in Adalo), the song becomes a favorite and a full heart icon appears, at the same place
  • When the users clicks on the full heart icon, the icon disappears, the song is not a favorite anymore and the empty heart icon appears, at the same place

So it pretty works when I do that, except the 2 icons are not overlayed:

Whereas I put them at the same place (one on top of another):

Do you know how I could do please to overlay the 2 icons?

Thank you in advance!

Hi Gary,

You can do this with a Toggle too. Then no need two icons. But if you do this with two icons add a rectangle too for alignment.

You can see here how Mario created this :

Thank you


Hi Dilon,

Thank you for your help! I tried to add the rectangle:

but still the 2 icons are not overlayed, maybe it is not possible with Adalo?

Thanks a lot in advance,


I can see only one icon in the screenshot? Does the other icon is top of the other icon?

Or you can try the Toggle.

1 Like

Yes the first icon is on top of the second one

Can you try like this?

1 Like

indeed I did not :slight_smile: not it works!

Thanks a lot Dilon!

1 Like

Your Welcome Gary!

I didn’t understand :slightly_smiling_face: It’s working right?

Yes sorry it works :slight_smile: (I wanted to say “now it works” :sweat_smile:)

1 Like

The best option is with toggle. It is the easiest, the fastest and then it is easy to manage who gave it. The more buttons and visibility you add, the slower the action and navigation of your app will be.


Hey Gary, I have to agree with @Lofi that the “toggle” component will be much better for your UX.

The tutorial video that I made shows how to do the rectangle+2 icons but the toggle component is much faster to respond to the click than the 2 icons with visibility settings.


Yep me too! That’s why I mentioned it first :slightly_smiling_face: