1. Design & Illustration
  2. Icon Design

Quick Tip: How to Create a Stylised Strawberry Icon in Adobe Illustrator

Final product image
What You'll Be Creating

Hi there fellow icon lovers, today’s quick tip sheds light on the process of creating convincing icons in Adobe Illustrator. As a subject for our little case study, I’ve chosen a fruit, more precisely a strawberry, which we will have dipped in chocolate.

I chose the reference image from PhotoDune's large library of images and it can be found on this page.

1. Do Your Research

As with any other project, the first thing you should do when you need to create something is learn about the subject. Research images and definitions, and find out what makes the subject tick.

Skeuomorphism is based on determining the characteristics that the design must take on in order for the object to depict its physical counterpart as accurately as possible.

For our case study, we must strip down a strawberry and learn about its basic structure and components.


Say the word strawberry and I bet that almost everybody on this planet will think of the color red. But wait, strawberries aren’t completely red! They have green leaves, and dozens of gold seeded little achenes.

Quick tip: Look up different images on the internet, and save the ones that you think have the most attractive tints of red, as we can use Illustrator’s Eyedropper Tool to borrow and apply those colors to our artwork.

color extraction from a strawberry image


When I think of the actual shape that defines a strawberry, one particular contour comes to my mind: a heart. No, not one of those boomboxes we carry in our chest, but rather the symbol we associate with caring, and loving, which is probably why strawberries are so deeply associated with love, and passion (remember Valentine’s Day).

At first, you might think that the subject’s shape isn’t important, but when you start looking at how light bounces on and off it, you realize that knowing and having the ability to visualize and reproduce that in your design is probably the most difficult thing to do.

heart shaped strawberry


From an anatomical point of view, the strawberry is composed of a main fleshy body (the receptacle) that houses the little seeds (achenes). At the top we find the leaves (calyx) and the peduncle. Because our icon will be based on a rounded rectangle shape, the only things we need to represent are the receptacle, the achenes and the calyx.

strawberry anatomy

2. Bigger Is Better

When working on an icon, whether it’s a strawberry one or something completely different, always try and start from the biggest size possible (most of the time that’s the market/store icon - 1024 x 1024 px for iOS and 512 x 512 px on Android). 

Why? Well, when you go down to smaller and smaller icon sizes, you might find that some parts of the artwork need to be either adjusted or removed completely, due to the fact that cramping in all that information onto a very limited space might impact the viewer’s understanding of the subject depicted in the representation.

3. Layer Your Artwork

If you want things to go smoothly, and want to have complete control over every single element on your Artboard, you should always create layers for each and every section of the design. 

If you take a look at my layers, you can see that I’ve separated my icon’s base shape from the reflections, the seeds from the body, etc., so that at any given time I know where my elements are. Also, most importantly, if I need to get something out of the way to have a better glimpse at a section underneath, I can do that simply by hiding that layer, without having to fear that somehow I accidentally deleted or moved parts of the illustration along the way.

layering our artboard

4. Start From Simple Shapes

When you start creating any project, you must understand that building an intricate piece of artwork starts with basic building blocks. Such is the case for our icon, where you start out by laying down the basic shape and color of the strawberry. These will act as our foundation, onto which we will add details one layer at a time.

creating the icon using simple shapes

Step 1

Create a 512 x 512 rounded rectangle with a Corner Radius of 96 px. Color it using #F01A08 and then make sure to center it both vertically and horizontally to the Artboard using the Align panel.

positioning the strawberrys basic shape

Step 2

Create a base seed by using the Ellipse Tool (L) and drawing an 80 x 120 px shape that will act as the inner pocket holding the seed. Color it using a darker red tint (#DB1808). Create a couple of duplicates and then, moving the one on the top towards the bottom, create two sections by selecting and then using Pathfinder’s Minus Front option. 

Color the resulting shapes using darker shades of red. Then create two inner ellipses that will act as our actual seed. Color them using #DF984D for the larger section and #E7D5A0 for the smaller, inner one. Add some shadows and highlights and then group all the elements together.

creating the seed

Step 3

Once you start working on the icon’s seeds, you should create a bunch of variations, as you will need to add larger ones to the center and smaller ones towards the extremities so that you can give your design a sense of dimension and volume. Also, try and rotate some of the smaller outer seeds towards the inside.

Step 4

Using the Pen Tool (P), start tracing four leaves, making sure to draw the bigger ones towards the inside and the smaller ones towards the edges. Once you’ve created the base shape, start adding some veins, and endings, and then finish the basic leaf by adding a couple of highlights.

creating the leaves

Step 5

Still using the Pen Tool (P), draw a wave-like line and finish it into a shape that will act as our chocolate section. You should know that you can go outside the strawberry’s base shape, and mask the parts that you don’t need using a Clipping Mask.

Apply a linear Gradient to the resulting shape, having the left color set to #69533F and the right one to a slightly darker #211B13. Change the angle of the Gradient to -90 and you’re good to go.

adding the chocolate

5. Play With Gradients and Blending Modes

Gradients are a fundamental tool in creating realistic-looking icons. Try and play around with different colors, settings, Opacity levels and most importantly Blending Modes to get the best out of your design.

I for example built the base of the strawberry by leaving the main red shape alone, and applying two white to black gradients with the Blending Mode set on Overlay and the Opacity levels lowered to about 54% for the second one, while I left the first at 100%. The transitions might not be that noticeable, but the end result is clearly there.

adding gradients to our strawberry base shape

6. Use Hard Highlights in Combination With Soft Ones

Use hard highlights for the seed’s bottom section, the chocolate’s top section and the leaves, while applying softer linear fading ones to the strawberry’s body. In order to get that softer look, simply select the highlight, add a linear Gradient with white for both colors, and then simply adjust the Opacity levels for each one.

adding a soft highlight

7. Use Drop Shadows

Wherever you need to cast a shadow from one part of the icon to another, always use the Drop Shadow effect (Effect > Stylize > Drop Shadow) giving it, depending on your taste, a harder or softer feel.

adding a drop shadow effect to the leaves

8. Add Subtle Textures

Apply subtle-looking grain textures to parts of the design that look too flat, such as the leaves and the chocolate. You can find the effect under Effect > Texture > Grain. Play around with its different settings until you find something that you like.

adding grain texture to the leaves

It’s a Wrap

That’s about it! If you keep mind all these little things, you should be able to create a darn good strawberry icon, but most importantly adapt some of the tricks to other projects.

Looking for something to help kick start your next project?

Envato Market has a range of items for sale to help get you started.