How to Create a Hover Swap Micro-Interaction for Social Media Icons in Framer

Hi! Today I’m going to show you how to create a micro-interaction in Framer for social media icons. It works with both images and SVGs, where on hover the icon moves up and reappears from below with reduced opacity.

This is an interaction I made for my real estate template Somner, and I wanted to share the process with you.

At the end, you’ll be able to create reusable components for sections like contact or anywhere you need social icons that feel alive.

This is the structure of the component.

Step 1: Create the Base Frame

• Start with a 24x24 Frame.

• Name it Swap Social Icon.

Then convert it into a Component with Ctrl + Alt + K.

Step 2: Set Up the Default State

• Rename the variant to Default.

• Wrap your image in a Stack.

• Use these values (see screenshot for reference).

This keeps everything neatly aligned and ready for animation.

Step 3: Configure the Image

• Adjust the Image properties (see values in the screenshot).

• This is what controls how your icon will scale and animate smoothly.

Convert the parent element into a Stack, Distribute : Start

Create an Image variable.

Duplicate the Icon Wrapper. Then set the parent element to Overflow: Hidden and keep Distribute: Start.

Add a Hover variant.

And change Distribute from Start to End.

First drop the component into your project, then upload an icon image or SVG, and hit preview.

If you want to reduce the hover opacity, just select the Hover variant and set Opacity to 50%.

And that’s it, you just built a hover swap micro interaction in Framer.
Now you can reuse this component anywhere: contact sections, footers, or even custom buttons.

Small detail, big impact.

Try it out in your next project and see how much more polished your UI feels.