How to Make a Filter Icon

Always wanted to learn how to create a filter icon, but never knew exactly where to start?

Well, if that’s the case then you’re in luck, since in this video I’m going to walk you through the entire process and show you how to create two variations of the same icon using Adobe Illustrator.

If you're new to icon design and feel like learning more about how to make icons, then this minimal icon project should be a great starting point!

Also, don't forget you can always expand your icon library by heading over to GraphicRiver, where you'll find a great selection of vector icons.

You can view this video and many more on our Envato Tuts+ YouTube Channel.

How to Make a Filter Icon in Adobe Illustrator

Assuming you already have the software running in the background, bring it up and let's get started!

Step 1

As with every new project, we’re going to start

by setting up a new document. Head over to File > New, or use the Control-N

keyboard shortcut, which will bring up the following window.

Here, we’ll want to set our Profile to Web and increase the Number of Artboards to 2, positioning them 32 px from

one another. Moving on down, we’re going to set both the Width and Height of our Artboards

to 32 px.

Step 2

As soon as we hit OK, we can start working on

our little project by opening up the Layers

panel and creating a secondary layer, naming them both so that we can

separate our icons from our reference grids.

Step 3

Position yourself on the bottom layer, and

let’s create the main shape for our reference surface using a 32 x 32 px square, which we will color

using a dark orange (#F15A24), making sure to center align it to the left Artboard


Step 4

Add the active drawing area using a 28 x 28 px square, which we will color

using white (#FFFFFF) and then position in the center of the previous shape, making sure

to select and group both of them together using the Control-G keyboard shortcut.

Quick tip: while basic, this reference grid will give us an

all-around 2 px protective padding,

which should prevent our icon from being clipped when used by other people.

Step 5

Once you’re done, create a copy (Control-C) of the resulting

grid and then paste (Control-F) it onto the secondary Artboard.

Step 6

As soon as we’ve finished setting up the grids,

we can lock the current layer and then move on up to the second one, where we

will start working on the actual icons.

Step 7

Position yourself on the first Artboard, and then create the upper

section of the funnel-shaped symbol using a 24 x 12 px rectangle, which we will color using a dark grey (#4D4D4D) and

then position at a distance of 2 px

from the center of the active drawing

area’s top edge.

Step 8

Add the funnel’s lower body using a 6 x 12 px rectangle (#4D4D4D), which we will

position below the previous one, so that their inner-facing paths overlap.

Step 9

Next, we’re going to adjust the shape of the

larger rectangle by individually selecting its bottom anchor points using the Direct

Selection Tool (A) and then dragging them to the inside so that they end

up overlapping those of the smaller shape.

Step 10

Adjust the lower shape by selecting its

bottom-right anchor point and then

pushing it to the top by 4

px using the directional arrow keys.

Step 11

Once you’re done, select both shapes and combine them into a single larger one by opening up the Pathfinder panel and using its Unite Shape Mode.

Step 12

Give the resulting

shape an outline by creating a copy (Control-C), which we will paste in front (Control-F). Flip its Fill with

its Stroke using the Shift-X keyboard shortcut, and then

open the Stroke panel and

set its Weight to 4 px and its Corner to Round Join.

As soon as we’ve added the outline, we can select and group the two

together using the Control-G

keyboard shortcut.

Step 13

Since we’re pretty much done working on the

first icon, we can position ourselves on the second Artboard, where we will build our second one.

Start by creating the main shape for the center

dial using a 4 x 28 px rounded

rectangle (#4D4D4D) with a 2 px Corner Radius,

which we will center align to the underlying Artboard.

Step 14

Add the knob using a smaller 8 x 4 px rounded rectangle (#4D4D4D) with a 2 px Corner Radius, which we will

position 8 px from

the previous shape’s top anchor point.

Once we have both shapes in place, we can select

and then group them together using the Control-G

keyboard shortcut.

Step 15

Create the left and right sliders using two

copies (Control-C > Control-F twice) of the one that we’ve just finished working on, which we will then align

to the side edges of the active drawing


Step 16

All we have to do

now is horizontally reflect the two copies, by first selecting them both and

then right-clicking and going

to Transform > Reflect >


Since at this point we’re pretty much done, we can select and group (Control-G) all

of the icon’s composing shapes so that they won’t get separated by accident.

Great Job!

As always, I hope you had fun watching this video and most importantly managed to learn something new and useful during the process!

Further Expand Your Icon-Building Skills!

Just finished going through this quick tutorial, and feel like learning more?

Well, if that's the case, you're in luck, since I took the time to put together this little list that should keep you going for the following days!

How to Make IconsAlways wanted to learn what it takes to create your own icon, but never knew exactly where to start? Well, with this article, that's going to change. You'll...

Andrei Stefan
19 Jul 2019

Icon Design

The Do's and Don'ts of Creating Line IconsLearn how to create line icons both in Adobe Illustrator and Affinity Designer, and see how you can craft a usable finished product using a few basic shapes.

Andrei Stefan
17 Sep 2018

Icon Design

10 Styles That Have Changed the Face of Icon DesignLet's explore the history and evolution of icons by looking at ten styles that have changed the face of icon design.

Andrei Stefan
07 Sep 2017

Icon Design

10 Top Tips for Creating Awesome Icons Today, I’m going to share with you ten tips on icon design that I’ve managed to isolate and put down in digital ink after doing some research from both my...

Andrei Stefan
13 Jan 2016

Icon Design

How to Scale Icons Correctly in Adobe IllustratorLately I’ve been getting a lot more technical and started exploring solutions to the different challenges that you might encounter along your creative...

Andrei Stefan
09 Dec 2015

Icon Design

How to Create Pixel-Perfect Artwork Using Adobe IllustratorAs a beginner, creating digital artwork intended for web use can sometimes get a bit frustrating, especially when you put a lot of time into a piece (be it...

Andrei Stefan
19 May 2015

Adobe Illustrator

Illustrator in 60 Seconds: How to Create an Emoji IconLearn how to create a cute little emoji icon, using nothing more than some basic shapes that we're going to adjust in Adobe Illustrator.

Andrei Stefan
12 Jul 2018

Adobe Illustrator

How to Create a Text Editor Icon Set in Adobe IllustratorIn today’s tutorial, we’re going to tackle another icon project, in which we’re going to gradually learn how to create a set of text editor elements, using...

Andrei Stefan
07 Mar 2018

Icon Design

How to Create 10 Common Icons and Their Variations in Adobe IllustratorTo celebrate our tenth birthday, learn how to create a set of ten must-have UI icons, using the most basic shapes and tools that Illustrator has to offer.

Andrei Stefan
04 Sep 2017

Icon Design

How to Create a Food Groups Icon Pack in Adobe IllustratorIn today’s tutorial, you'll learn to create the primary five food groups using basic geometric shapes and tools in Adobe Illustrator.

Andrei Stefan
21 Aug 2017

Icon Design


June 23,2021

Leave a Reply