How to make an icon in the kawaii style
Bored with bland icons? You deserve better than forgettable symbols that leave users scratching their heads. Time to unleash the power of custom icons that grab attention, spark understanding, and guide users like a friendly GPS.
"Good icons should be more like road signs than illustrations, easily comprehensible, and not cluttered with extraneous detail."—Susan Kare, a graphic designer known for her pioneering work at Apple
Here"s what you"ll need:
• Design software: preferably a vector-based program like Linearity Curve.Â
• Sketchpad and pencils: for initial brainstorming and sketching out ideas.
• Research materials: access to resources for inspiration and understanding the context of the icon’s use.
• Computer with adequate specifications: We"re using a Macbook for this tutorial.
We'll break down the icon creation process into easy-to-follow steps. Soon, you'll be churning out iconic masterpieces that are seriously smart and helpful.
Jumpstart your ideas with Linearity Curve
Take your designs to the next level.
Icons like the "hamburger" menu, the magnifying glass for search, and the home icon have become universal symbols in digital navigation.Â
Ready to start our icon design tutorial? Get your pencils and digital pen.
Hack it: Did you know that Iconator is a gallery inside Linearity Curve with over 80,000 royalty-free icons that you can use as icon templates? We promise we won"t tell anyone your secret.
Step 1
Icon research and inspiration
Looking at diverse source material for inspiration is a good idea.
Research some imagery online and offline for inspiration. In this tutorial, we're focusing on creating a kawaii-themed icon. Kawaii, a Japanese term meaning "cute," is taking the world by storm. Its playful charm and whimsical vibes are popping up everywhere, from phone apps to fashion.
Why kawaii? Their bright colors, rounded shapes, and simple designs make it easy to communicate positive emotions. No wonder they"re popular in apps, websites, and branding for younger audiences.
Notice the fluffy characters, pastel palettes, and playful shapes that make kawaii characters so charming.
Hand drawing icons, especially in the kawaii style, involves a few basic steps. But the most important is letting your creativity fly and enjoying the process.
Kawaii icon design tips
- Start simple: begin with basic shapes like circles and squares. These simple shapes are the foundations of your kawaii icon.
- Emphasize key features: for kawaii designs, focus on cute, exaggerated features like large eyes or rounded shapes.
- Create variations: Sketch multiple versions of your icon. Experiment with different expressions and proportions to find the best design.
- Aim for clarity: Remember, icons should be recognizable in small sizes. Keep your design simple and avoid clutter.
- Refine your sketch: Once you have a concept you like, clean up the sketch, defining lines and shapes more clearly. This will be your guide for the digital design phase.
Step 2
Start a new document
Open Linearity Curve and select New Document, then choose your Artboard size template.
We selected the Mac App icon size for this tutorial, but you'll also see other suitable sizes in the New Document section.
You may wonder about the ideal icon size. In truth, size is somewhat flexible when working with vectors, as they maintain high quality at any scale, even larger sizes.
However, it's essential to remember a key rule in icon design: your icon should fit within a square.
If you prefer working with predefined sizes, consider these standard dimensions:Â
Size | Width x Height |
---|---|
Small | 16 x 16px, 24 x 24px, 32 x 32px |
Medium | 48 x 48px, 64 x 64px |
Large | 96 x 96px, 128 x 128px |
Extra Large | 256 x 256px, 512 x 512px |
Create a new layer in the Layers Tab on the left.
Step 3
Draw your base shape
Now, you can create your icon. One option is to try the Auto Trace feature.
Linearity Curve"s Auto Trace feature converts any raster image (.jpeg or .png, for example) into vector artwork.
But for this tutorial, we're creating our icon using Curve's drawing tools to create our kawaii-inspired Pokéball from the anime series Pokémon.
Starting with the Shape Tool, select the Oval Button from the shape menu that appears in the Toolbar. Want a shortcut? Simply press O on your keyboard to activate Oval Shape Tool.
Draw a big circle on your Artboard. Hold down Shift on your keyboard while dragging your cursor to create a perfect circle.
Then, change the Fill color to that distinctive Pokéball shade of red.
Next, add a thick black Stroke around your red circle. We set the Stroke Width to 50pt.
Add a Line Shape horizontally across the circle's diameter. Linearity automatically sets the line thickness to the same Stroke Width that was last used, which is handy.Â
Learn more about how to use the Stroke and Fill functions in this tutorial.
Now, add another smaller circle in the middle of that line and make the Fill white.
You may need to move it up in the Layer menu so that it appears on top of the other elements. This is the closure hole of the Pokéball.
Add another plain black circle centered on top, aligned with its center point, to make the button.
Step 4
Draw the kawaii face
Draw a white circle slightly smaller than the red base circle and toggle Stroke off. Adjust the upper path nodes of the white circle so that it only reaches the middle black line.
Then, move the white half-circle shape's layer lower down, so that the button and closure appears above the white circle.
Add two small black circles for the eyes of your kawaii face.
This is where your icon comes to life. Add distinctive kawaii elements such as eye sparkles, cheerful pink cheeks, and rounded shapes.
But try to keep the design simple and readable at small sizes.
For the eye sparkles, add two small circles to the one eye. Use the Selection Tool in Multi Select Mode to select both of these small white circles, then choose Duplicate Mode and drag and drop them on the other eye.
Use the Line Shape Tool to draw a straight line for the small mouth.
Then, use the Node Tool to curve the line and make a classic kawaii smiling mouth.
Add rosy cheeks to keep things at their peak cuteness, using the Brush Tool. Set the Brush's Stroke with a wide bristle, and choose a pink shade for the Stroke color.
Under the Appearance section in the Style Tab, slide the Blur to about 45pt.
Step 5
Export and share your kawaii icon design
The final and crucial step in your design process is exporting your artwork. Always refer to your project's specific guidelines or requirements, particularly when designing icons for various digital platforms.
Go to the File menu, select Export, and choose the file format. And there you have it: your very own freshly minted icon.
Icons are typically saved as .svg files, a format widely supported by web browsers and vector design tools.
You're an icon (maker)
Congrats, you've officially crafted a miniature marvel, a kawaii icon that speaks volumes in pixels. But you've only scratched the surface—there are so many different types of icons you can create with Linearity Curve.
And besides our large Iconator library of free icons and vector graphics, you can also browse and use Unsplash stock images inside Linearity Curve. These built-in resources make it easy and convenient to find traceable images for icon design.
Another feature that can help you make icons in a jiffy is our Background Removal tool. It lets you drop any raster image into Linearity Curve and remove the background with content-aware AI.
Are you ready to try new and innovative graphic design software to bring your images to life?
Jumpstart your ideas with Linearity Curve
Take your designs to the next level.
Frequently asked questions
Garreth van Niekerk
Contributing Writer
One of GQ's 'Young Creatives To Watch' and described as a "Creative Force" by the Sunday Times, author, designer and marketer Garreth van Niekerk is a contributor for Linearity in Johannesburg.