Guide
- Animate
- Icons
- Hover
Guide
- Animate
- Icons
- Hover
Guide
- Animate
- Icons
- Hover
How to Animate Icons on Hover in Framer
In this Framer blog, you'll learn the exactly how I go from redrawing icons with the pen tool to creating smooth hover animations - all without touching code. If you've been wondering how Framer made those animated icons, this is your behind-the-scenes look.
Posted by
Nandi
Table of contents
Grab your icon
The icon showcased in Framer’s spring event comes from Phosphor Icons. In this example, I used the “signature” icon. You can:
Head to the Phosphor site
Search for the icon you want
Copy it as an SVG
Once copied, paste it directly into your Framer project.
Heads up: Many SVG icons from Phosphor are
fill-based
Redraw the icon
Since the original icon uses fills, we’ll recreate it using strokes.
Paste the SVG into your canvas and use it as a reference.
Press P to activate the Pen tool.
Carefully trace over the icon: Click and drag to create curves now just click for corners or straight lines. Adjust handles to fine-tune curves
Once done, set: Stroke width to 2. Cap to round. Join to round
Now you’ve got a stroke-based version of the icon, perfect for animation.
Grab your icon
The icon showcased in Framer’s spring event comes from Phosphor Icons. In this example, I used the “signature” icon. You can:
Head to the Phosphor site
Search for the icon you want
Copy it as an SVG
Once copied, paste it directly into your Framer project.
Heads up: Many SVG icons from Phosphor are
fill-based
Redraw the icon
Since the original icon uses fills, we’ll recreate it using strokes.
Paste the SVG into your canvas and use it as a reference.
Press P to activate the Pen tool.
Carefully trace over the icon: Click and drag to create curves now just click for corners or straight lines. Adjust handles to fine-tune curves
Once done, set: Stroke width to 2. Cap to round. Join to round
Now you’ve got a stroke-based version of the icon, perfect for animation.
Grab your icon
The icon showcased in Framer’s spring event comes from Phosphor Icons. In this example, I used the “signature” icon. You can:
Head to the Phosphor site
Search for the icon you want
Copy it as an SVG
Once copied, paste it directly into your Framer project.
Heads up: Many SVG icons from Phosphor are
fill-based
Redraw the icon
Since the original icon uses fills, we’ll recreate it using strokes.
Paste the SVG into your canvas and use it as a reference.
Press P to activate the Pen tool.
Carefully trace over the icon: Click and drag to create curves now just click for corners or straight lines. Adjust handles to fine-tune curves
Once done, set: Stroke width to 2. Cap to round. Join to round
Now you’ve got a stroke-based version of the icon, perfect for animation.
Redrawing the icon.
Redrawing the icon.
Redrawing the icon.
Convert to a vector set
Next, we need to convert the icon into a vector set, which makes it reusable and animatable.
Select your newly drawn paths.
Group them (Cmd + G) and name it something like icon.
Right-click the group and select Create Vector Set.
Rename the vector (e.g. sign) and the main paths if you like (e.g. curly, horizontal).
Your vector set will now live in a dedicated canvas. Make sure:
The main frame is 24x24 pixels
The icon is centered
The fill color is set to something visible (white works well)
Tip: Remove the fill on the outer vector frame if it’s blocking visibility.
Add a color variable
Before we animate, let’s make the icon customizable.
Select both paths inside your vector.
In the right panel, click the + icon next to the fill color to turn it into a color variable.
Now you’ll be able to tweak the icon color per instance—super helpful for hover states and theming.
Add stroke animation
Here comes the magic.
Select your path(s).
In the top-right panel, add a Stroke Effect.
Customize the stroke animation: Easing: ease out. Duration: 2s (or whatever fits your style)
Preview your site (Cmd + P) and you’ll see the icon animate—but it plays on load, not on hover. Time to fix that.
Make it animate on hover
By default, stroke animations trigger when the page loads. To animate on hover, we’ll need two icon states:
Default (no animation)
Hover (animated version)
Here’s how:
Duplicate your original vector set instance (Cmd + D).
On the duplicate: Add the stroke animation then, adjust easing/duration if needed. Now rename it something like sign-animated
In a Frame or Component, add both states: (1) Default state shows the static icon (2) Hover state switches to the animated icon
Now that everything is set up:
Your icon animates beautifully on hover
The stroke animation feels natural and smooth
You’ve got full control over the icon’s color, size, and animation speed
And the best part? You did it all without writing a single line of code.
Convert to a vector set
Next, we need to convert the icon into a vector set, which makes it reusable and animatable.
Select your newly drawn paths.
Group them (Cmd + G) and name it something like icon.
Right-click the group and select Create Vector Set.
Rename the vector (e.g. sign) and the main paths if you like (e.g. curly, horizontal).
Your vector set will now live in a dedicated canvas. Make sure:
The main frame is 24x24 pixels
The icon is centered
The fill color is set to something visible (white works well)
Tip: Remove the fill on the outer vector frame if it’s blocking visibility.
Add a color variable
Before we animate, let’s make the icon customizable.
Select both paths inside your vector.
In the right panel, click the + icon next to the fill color to turn it into a color variable.
Now you’ll be able to tweak the icon color per instance—super helpful for hover states and theming.
Add stroke animation
Here comes the magic.
Select your path(s).
In the top-right panel, add a Stroke Effect.
Customize the stroke animation: Easing: ease out. Duration: 2s (or whatever fits your style)
Preview your site (Cmd + P) and you’ll see the icon animate—but it plays on load, not on hover. Time to fix that.
Make it animate on hover
By default, stroke animations trigger when the page loads. To animate on hover, we’ll need two icon states:
Default (no animation)
Hover (animated version)
Here’s how:
Duplicate your original vector set instance (Cmd + D).
On the duplicate: Add the stroke animation then, adjust easing/duration if needed. Now rename it something like sign-animated
In a Frame or Component, add both states: (1) Default state shows the static icon (2) Hover state switches to the animated icon
Now that everything is set up:
Your icon animates beautifully on hover
The stroke animation feels natural and smooth
You’ve got full control over the icon’s color, size, and animation speed
And the best part? You did it all without writing a single line of code.
Convert to a vector set
Next, we need to convert the icon into a vector set, which makes it reusable and animatable.
Select your newly drawn paths.
Group them (Cmd + G) and name it something like icon.
Right-click the group and select Create Vector Set.
Rename the vector (e.g. sign) and the main paths if you like (e.g. curly, horizontal).
Your vector set will now live in a dedicated canvas. Make sure:
The main frame is 24x24 pixels
The icon is centered
The fill color is set to something visible (white works well)
Tip: Remove the fill on the outer vector frame if it’s blocking visibility.
Add a color variable
Before we animate, let’s make the icon customizable.
Select both paths inside your vector.
In the right panel, click the + icon next to the fill color to turn it into a color variable.
Now you’ll be able to tweak the icon color per instance—super helpful for hover states and theming.
Add stroke animation
Here comes the magic.
Select your path(s).
In the top-right panel, add a Stroke Effect.
Customize the stroke animation: Easing: ease out. Duration: 2s (or whatever fits your style)
Preview your site (Cmd + P) and you’ll see the icon animate—but it plays on load, not on hover. Time to fix that.
Make it animate on hover
By default, stroke animations trigger when the page loads. To animate on hover, we’ll need two icon states:
Default (no animation)
Hover (animated version)
Here’s how:
Duplicate your original vector set instance (Cmd + D).
On the duplicate: Add the stroke animation then, adjust easing/duration if needed. Now rename it something like sign-animated
In a Frame or Component, add both states: (1) Default state shows the static icon (2) Hover state switches to the animated icon
Now that everything is set up:
Your icon animates beautifully on hover
The stroke animation feels natural and smooth
You’ve got full control over the icon’s color, size, and animation speed
And the best part? You did it all without writing a single line of code.
Animated icon.
Animated icon.
Animated icon.
Wrapping up
Animating icons on hover in Framer is easier than it looks, once you understand how vector sets and stroke animations work. If you are struggling to understand it, you should check out my full length tutorial on Vector animations.
This technique is perfect for: Buttons with dynamic feedback, navigation menus and icon sets that feel alive on interaction. Try it out, remix it, and make it yours.
Wrapping up
Animating icons on hover in Framer is easier than it looks, once you understand how vector sets and stroke animations work. If you are struggling to understand it, you should check out my full length tutorial on Vector animations.
This technique is perfect for: Buttons with dynamic feedback, navigation menus and icon sets that feel alive on interaction. Try it out, remix it, and make it yours.
Wrapping up
Animating icons on hover in Framer is easier than it looks, once you understand how vector sets and stroke animations work. If you are struggling to understand it, you should check out my full length tutorial on Vector animations.
This technique is perfect for: Buttons with dynamic feedback, navigation menus and icon sets that feel alive on interaction. Try it out, remix it, and make it yours.
