Winking face animated sticker
A round face bobs, raises a brow and winks with a grin, while a sparkle pops by the eye.
Change anything, then export a GIF, an MP4 or a transparent video.
Free download
Free for your own projects and client work, including commercial use. Read the licence
What it's good for
It is 512 × 512 pixels and 2 seconds long, and it loops without a visible jump, so it can play for as long as you need. The background is transparent, so it sits on top of any page, photo or video.
The colours, fonts and timing come from the brand kit you pick. Each brand has its own motion style, so the same animation moves slower for a calm brand and quicker for a snappy one.
- Reactions in chat and comments
- Stories and posts on social media
- Rewards and badges in apps
How to use it on a website
- Pick your brand above, then download the dotLottie file.
- Add it to your site's files, for example as
/animations/sticker-wink.lottie. - Paste the code where the animation should play.
Without code
- Webflow: upload the Lottie JSON file in the Assets panel, then drag it onto your page.
- Framer: add a Lottie component and give it the JSON file.
- WordPress: use a Lottie block plugin and upload the JSON file.
- iOS and Android: add the file to your app and play it with the official Lottie library.
Need it as a GIF or a video? Download the Lottie JSON and use the free Lottie to GIF or Lottie to MP4 converter, or check any file in the Lottie viewer.
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc/dist/dotlottie-wc.js" type="module"></script>
<dotlottie-wc src="/animations/sticker-wink.lottie" autoplay loop
style="width: 160px; height: 160px"></dotlottie-wc>
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
export function StickerWink() {
return (
<DotLottieReact
src="/animations/sticker-wink.lottie"
autoplay
loop
style={{ width: 160, height: 160 }}
/>
);
}
// npm install lottie-web
// In your HTML: <div id="sticker-wink" style="width: 160px; height: 160px"></div>
import lottie from 'lottie-web';
lottie.loadAnimation({
container: document.getElementById('sticker-wink'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '/animations/sticker-wink.json',
});
Good to know
Export a GIF for chat
Most chat and email apps play GIFs, not Lottie. Export a GIF from Mosso for those, and keep Lottie for your own site and app.
Keep them small
Stickers read best at about 96 to 200 pixels.
Loop gently
Stickers loop, so a small movement goes a long way. Big moves get tiring after a few loops.
Respect reduced motion
Some people ask their device for less motion. Check prefers-reduced-motion and show a still frame for them instead.
Questions
Is this winking face animation free?
Yes. Download the Lottie JSON or dotLottie file above for free, with no account. You can use it in your own projects and in client work, including commercial work. You just can't resell it or give it away as a template or stock file.
Can I change the colours?
Yes. Pick a sample brand above to see how it changes. To use your own colours, fonts and logo, open it in Mosso, where every layer and keyframe is editable.
Should I download Lottie JSON or dotLottie?
dotLottie is the same animation in a zipped file, so it is smaller: this one is about 1.8 KB instead of 9.7 KB. Use it with the dotLottie players for the web, React, iOS and Android. Pick Lottie JSON when a tool asks for a .json file, like Webflow or lottie-web.
Can I get it as a GIF or a video?
Yes. Open it in Mosso and export a GIF, an MP4, a WebM video with a transparent background or PNG frames, all from the same project.
Can I use them in chat apps?
Yes. Export a GIF from Mosso. Many chat apps, like Slack and Discord, let you upload GIFs as custom emoji.
Make it yours in Mosso
Change the words, colours, timing and size, add your logo, and export Lottie, GIF, MP4 or transparent video. Or start from a blank canvas and make something new.