masko
APP MASCOT EXAMPLES
From Duo’s celebrations to Finch’s daily companion, app mascots give familiar tasks a familiar face. Explore the examples, then make a character for your own product.
Four examples from products you may already use. Each character has a role worth learning from when you design your own.
Independent examples, not Masko customer work. Artwork belongs to the respective brands; original sources are linked below.
01 CELEBRATE PROGRESS
Duo turns a streak milestone into a small performance. Duolingo’s design story shows the owl evolving from carrying milestone balloons to an animated, phoenix-like celebration.
Save your biggest reaction for a meaningful achievement. Let the character make progress visible.
02 BUILD A DAILY CONNECTION
Finch connects everyday self-care with a customizable bird companion. Goals, adventures, and outfits give the character a continuing place in someone’s daily routine.
Give a recurring task a familiar companion. Small changes can help the character grow alongside the person using your app.
03 MAKE THE PRODUCT RECOGNIZABLE
GitHub’s Invertocat logo represents its Octocat mascot. The same recognizable shape connects the product with its documentation, emails, and events.
Design a silhouette that still reads at a small size. Your mascot and app icon can share a clear visual identity.
04 SET A FRIENDLY TONE
Mailchimp pairs its name with Freddie, a winking chimp. That expression gives the brand a friendly character while keeping the name and mascot recognizable together.
Choose an expression that matches your product’s voice. A small, consistent detail can carry a lot of personality.
Start with a moment in your app where a character can help. A welcome, a quiet wait, or a small celebration is enough for a first version.
Pair a friendly greeting with one clear next step. Keep the character beside the action so onboarding stays easy to follow.
Use a quiet loop while a task runs. Keep real progress and status text visible, and let people reduce or pause motion.
Play a short reaction when someone finishes a task or reaches a milestone. Then return to a calm state so the celebration stays special.
Create your own mascot from a description or reference image. Keep its face, colors, and silhouette consistent across poses.
Create a mascot →Start with an idle, a working loop, and a celebration. Transparent exports let your character sit inside your app or website layout.
Animate your mascot →Connect character states to your app’s events. Use the canvas for behavior, or explore the Mac runtime for a floating desktop companion.
Explore interactive mascots →THE LITTLE DETAILS
we were hoping you’d ask.
An app mascot is a recurring character associated with a product. It can introduce a feature, accompany a daily routine, celebrate progress, or make the brand recognizable across an app and its website.
Examples include Duo from Duolingo, Finch’s customizable bird companion, GitHub’s Octocat, and Mailchimp’s Freddie. They play different roles, from celebrating milestones to representing a brand. The examples on this page link to each company’s own explanation.
These are independent examples from other products, not Masko customer work. Madame Patate, Ko, and Dumple in the page’s opening illustration are Masko characters. Use the examples to think about your own original character and its role in your product.
Choose a useful moment such as onboarding, waiting for a task, or celebrating completion. Keep essential instructions and status information in text, and avoid covering controls. Start with one moment before expanding across your product.
Yes. Create a character and transparent animation assets in Masko Studio for use in your app or website. Studio also offers interactive behavior tools and a Mac CLI and SDK for a separate floating mascot window.
Explore the Mac CLI and SDKSTART WITH A LITTLE CHARACTER