New! Unlimited audio, video & web asset downloads! Unlimited audio, video & web assets! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Icon Design
Design

How to Create a Text Editor Icon Set in Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:
Final product image
What You'll Be Creating

In 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 some of the basic shapes and tools found within good old Illustrator.

So, if that sounds like something right up your alley, make sure you grab a fresh cup of that magic bean juice and let’s get started!

And don’t forget, you can always expand the pack by heading over to GraphicRiver where you’ll find a huge selection of UI icons.

1. How to Set Up a New Project File

Assuming you already have Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N) using the following settings:

  • Number of Artboards: 24
  • Spacing: 20 px
  • Columns: 4
  • Width: 32 px
  • Height: 32 px
  • Units: Pixels

And from the Advanced tab:

  • Color Mode: RGB
  • Raster Effects: Screen (72ppi)
  • Preview Mode: Default
setting up a new document

2. How to Set Up a Custom Grid

Since we’re going to be creating the icons using a pixel-perfect workflow, we’ll want to set up a nice little Grid so that we can have full control over our shapes.

Step 1

Go to the Edit > Preferences > Guides & Grid submenu, and adjust the following settings:

  • Gridline every: 1 px
  • Subdivisions: 1
setting up a custom grid

Quick tip: you can learn more about grids by reading this in-depth piece on How Illustrator’s Grid System Works.

Step 2

Once we’ve set up our custom grid, all we need to do in order to make sure our shapes look crisp is enable the Snap to Grid and Snap to Pixel options found under the View menu, which will transform into Snap to Pixel each time you enter the Pixel Preview mode (if you’re using an older version of the software).

Now, if you’re new to the whole “pixel-perfect workflow”, I strongly recommend you go through my How to Create Pixel-Perfect Artwork tutorial, which will help you widen your technical skills in no time.

3. How to Set Up the Layers

With the New Document created, it would be a good idea to structure our project using a couple of layers in order to separate the reference grids from the actual icons. If you're familiar with my previous tutorials, you’ll notice that with this one we’re taking a slightly different approach, since we’re basing the project on Artboards instead of Layers due to the high icon count.

That being said, bring up the Layers panel, and create a total of two layers, which we will rename as follows:

  • layer 1: reference grids
  • layer 2: icons
setting up the layers

4. How to Create the Reference Grids

The reference grids (or base grids) are a set of precisely delimited reference surfaces, which allow us to build our icons by focusing on size and consistency.

Usually, the size of the grids determines the size of the actual icons, and they should always be the first decision you make once you start a new project, since you’ll always want to start from the smallest possible size and build on that.

Now, in our case, we’re going to be creating the icon pack using just one size, more exactly 32 x 32 px, which is on the smaller side of the scale.

Step 1

Make sure you’re on the right layer (that would be the first one), and then grab the Rectangle Tool (M) and create a 32 x 32 px orange (#F15A24) square which we will center align to the first Artboard and use to define the overall size of our icons.

creating the main shape for the reference grid

Step 2

Add a smaller 28 x 28 px one (#FFFFFF) which we will position on top of the previous shape, since it will act as our active drawing area, thus giving us an all-around 2 px padding to work with.

creating the main shape for the active drawing area

Step 3

Select and group the two squares together using the Control-G keyboard shortcut, and then create the remaining grids using 23 copies (Control-C > Control-F) which we will position onto each of the empty Artboards. Take your time, and once you’re done, make sure you lock the current layer before moving on to the next section.

adding the remaining reference grids

5. How to Create the Justify Icon

Assuming you’ve successfully managed to create and position the little reference grids, move on to the next layer (that would be the second one), and let’s kick off the project by creating the first icon of the set.

Step 1

Start by creating the bottom horizontal line using a 2 px thick Stroke, which we will color using #252A2D and then position at a distance of 2 px from the center of the active drawing area’s bottom edge.

creating the bottom line for the justify icon

Step 2

Finish off the icon by adding the remaining lines using two copies (Control-C > Control-F twice) of the one that we’ve just created, which we will vertically stack at a distance of 4 px from the original. Once you’re done, select and group all three of them together using the Control-G keyboard shortcut before moving on to the next reference grid.

finishing off the justify icon

6. How to Create the Align Left Icon

As soon as we’ve finished working on the second icon, we can move on to the next active drawing area, where we will quickly put together our next one.

Step 1

Since some of the upcoming icons are based on the one that we’ve just finished working on, we will make a copy (Control-C) of it which we will then paste (Control-F) onto the current reference grid, making sure to click on the underlying Artboard first to make it active.

creating the main shapes for the left align icon

Step 2

Isolate the middle stroke by double clicking on it, and then shorten its length from 24 px to 16 px—you can do this by selecting its right anchor point using the Direct Selection Tool (A) and then pushing it to the left by 8 px using the Move tool (right click > Transform > Move > Horizontal > - 8 px). 

Once you’re done, press the Escape key to exit Isolation Mode, and then make a copy (Control-C) of the resulting icon before moving on to the next grid.

finishing off the left align icon

7. How to Create the Right Align Icon

Next, we’re going to quickly create the right align icon, so make sure you’re on the right Artboard (that would be the third one) and let’s get started.

Step 1

Paste a copy of the icon that we’ve just finished working on onto the empty active drawing area using the Control-F keyboard shortcut.

creating the main shapes for the right align icon

Step 2

Adjust the copy that we’ve just created by vertically reflecting it using the Reflect tool (right click > Transform > Reflect > Vertical). Once you’re done, don’t forget to make a copy (Control-C) of the resulting icon, before moving on to the next one.

finishing off the right align icon

8. How to Create the Center Align Icon

Since no text editor is complete without a center align option, we’re going to quickly add one in the following moments.

Step 1

Paste a copy of the previous icon onto the fourth Artboard using the Control-F keyboard shortcut so that it places it in exactly the same position.

creating the main shapes for the center align icon

Step 2

Isolate the middle Stroke of the copy that we’ve just created by double clicking on it, and then center align it to the underlying Artboard using the Align panel’s Horizontal Align Center option. Once you’re done, quickly exit Isolation Mode by pressing the Escape key.

finishing off the center align icon

9. How to Create the Increase Indent Icon

Move on down to the second row, and then zoom in on the first artboard where we will start working on our next icon.

Step 1

Create the icon’s main shapes using a copy (Control-C) of the justify one, which we will paste (Control-F) onto the current active drawing area and then adjust by isolating and shortening the length of its middle and bottom Strokes from 24 px to 12 px using the Move tool (left anchor points selected > right click > Transform > Move > Horizontal > 12 px).

creating and adjusting the main shapes for the increase indent icon

Step 2

Add the main shape for the right-facing arrow using an 8 x 12 px rectangle, which we will color using #252A2D and then position on the left side of the active drawing area, as seen in the reference image.

creating the main shape for the arrow of the increase indent icon

Step 3

Finish off the icon by turning the shape that we’ve just created into an arrow by first adding a new anchor point to the center of its right edge using the Add Anchor Point Tool (+), and then removing its top and bottom ones using the Delete Anchor Point Tool (-). Once you’re done, exit Isolation mode, and then make a copy (Control-C) of the entire icon before moving on to the next Artboard.

finishing off the increase indent icon

10. How to Create the Decrease Indent Icon

Assuming you’ve finished working on the previous icon, position yourself on the neighboring Artboard, where we will create its alternate version.

Step 1

Use the Control-F keyboard shortcut to paste a copy of the increase indent icon onto the current active drawing area.

creating the main shapes for the decrease indent icon

Step 2

Double click on the little arrow to isolate it, and then quickly adjust it by vertically reflecting it using the Reflect tool (right click > Transform > Reflect > Vertical). Once you’re done, don’t forget to exit Isolation Mode using the Escape key before moving on to the next icon.

finishing off the decrease indent icon

11. How to Create the Add Space Before Paragraph Icon

As soon as you’ve finished working on the decrease indent icon, we can move on to the next active drawing area, where we will create our next item.

Step 1

Create the main shapes of the icon using a copy (Control-C) of the justify one, which we will paste (Control-F) onto the current Artboard, making sure to center align it to the active drawing area’s bottom edge.

creating the main shapes for the add space before paragraph icon

Step 2

Ungroup the copy that we’ve just pasted (right click > Ungroup or Shift-Control-G), and then adjust it by removing its top Stroke line by selecting it and then pressing Delete.

adjusting the shapes of the add space before paragraph icon

Step 3

Finish off the current icon by adding the down-facing arrow. We will create it using a 12 x 8 px rectangle (#252A2D), which we will adjust by adding a new anchor point to the center of its bottom edge using the Add Anchor Point Tool (+), and then removing its bottom ones using the Delete Anchor Point Tool (-). Once you’re done, select and group (Control-G) all three shapes together before moving on to the next one.

finishing off the add space before paragraph icon

12. How to Create the Add Space After Paragraph Icon

Next, we’re going to quickly create an alternate version of the icon that we’ve just finished working on.

Step 1

Create a copy (Control-C) of the previous icon, which we will paste (Control-F) onto the empty active drawing area, as seen in the reference image.

creating the main shapes for the add space after paragraph icon

Step 2

Ungroup the copy that we’ve just created (right click > Ungroup or Shift-Control-G), and then adjust the icon by flipping the position of its Strokes with its arrow as seen in the reference image, making sure to select and group (Control-G) them before moving on to the next one.

finishing off the add space after paragraph icon

13. How to Create the Type Tool Icon

Assuming you’ve already moved down to the third row, let’s start working on the next category, which has to do with text formatting.

Step 1

Create the upper section of the icon using a 20 x 6 px rectangle with a 4 px thick Stroke, which we will color using #252A2D and then center align to the active drawing area’s top edge.

creating the upper section of the type tool icon

Step 2

Open up the path of the shape that we’ve just created by adding a new anchor point to the center of its bottom edge using the Add Anchor Point Tool (+) and then immediately selecting and removing it by pressing Delete.

opening up the path of the upper section of the type tool icon

Step 3

Add the center section using a 20 px tall 8 px thick vertical Stroke line (#252A2D), which we will center align to the previous shape, as seen in the reference image.

adding the vertical section to the type tool icon

Step 4

Finish off the icon by creating the bottom section using a 16 px wide 4 px thick Stroke line (#252A2D), which we will center align to the active drawing area’s bottom edge. Take your time, and once you’re done, select and group (Control-G) all three shapes together before moving on to the next one.

finishing off the type tool icon

14. How to Create the Bold Icon

Next, we’re going to quickly create one the most used icons in all text editor history, so make sure you’ve positioned yourself on the next Artboard, and let’s jump straight into it.

Step 1

Create the lower section of the icon using a 12 x 12 px square with a 4 px thick Stroke, which we will color using #252A2D and then center align to the active drawing area’s bottom edge.

creating the lower section of the bold icon

Step 2

Quickly adjust the shape that we’ve just created by setting the Radius of its right corners to 6 px from within the Transform panel’s Rectangle Properties.

adjusting the lower section of the bold icon

Step 3

Finish off the current icon by adding the upper section using an 8 x 8 px square with a 4 px thick Stroke (#252A2D), which we will adjust by setting the Radius of its right corners to 4 px from within the Transform panel’s Rectangle Properties. Once you’re done, position the resulting shape as seen in the reference image, making sure to select and group them together afterwards using the Control-G keyboard shortcut.

finishing off the bold icon

15. How to Create the Underline Icon

As usual, make your way to the next Artboard, where we will see how to put together the underline icon.

Step 1

Start by creating the lower section using a 24 px wide 4 px thick Stroke line, which we will color using #252A2D and then center align to the active drawing area’s bottom edge.

creating the lower section of the underline icon

Step 2

Create the main shape for the “U” letter using a 12 x 14 px rectangle with a 4 px thick Stroke (#252A2D), which we will center align to the active drawing area’s top edge so that its path overlaps it.

creating the upper section of the underline icon

Step 3

Start adjusting the shape by setting the Radius of its bottom corners to 6 px from within the Transform panel’s Rectangle Properties.

adjusting the upper shape of the underline icon

Step 4

Finish off the icon by opening up the path of the shape that we’ve previous adjusted, by adding a new anchor point to the center of its top edge using the Add Anchor Point Tool (+), and then immediately selecting and removing it by pressing Delete. Once you’re done, don’t forget to select and group the two shapes together using the Control-G keyboard shortcut.

finishing off the underline icon

16. How to Create the Italic Icon

We are now down to the last icon of the current row, so assuming you’ve already positioned yourself onto the Artboard, let’s create the next item.

Step 1

Create the bottom and upper sections of the “I” shaped letter using two 16 px wide 4 px thick Stroke lines (#252A2D), which we will position as seen in the reference image.

creating the bottom and upper sections of the italic icon

Step 2

Finish off the current icon by adding the diagonal line connecting the two horizontal sections using a 4 px thick Stroke (#252A2D). As always, once you’re done, select and group (Control-G) all three shapes together before moving on to the next one.

finishing off the italic icon

17. How to Create the Bring to Front Icon

Assuming you’ve moved down another row, zoom in on its first Artboard and let’s create our next icon.

Step 1

Start by creating the front shape using a 12 x 12 px square with a 4 px thick Stroke, which we will color using #252A2D and then align to the active drawing area’s top-left corner.

creating the front shape of the bring to front icon

Step 2

Create the back shape using another 12 x 12 px square with a 4 px thick Stroke (#252A2D), which we will align to the active drawing area’s bottom-right corner.

creating the back shape of the bring to front icon

Step 3

Adjust the shape of the square that we’ve just created by adding a set of new anchor point where its paths intersect those of the first one using the Add Anchor Point Tool (A), making sure to reposition its corner one as seen in the reference image.

adjusting the back shape of the bring to front icon

Step 4

Finish off the icon by adding a fill to the resulting shape, which we will create using a copy (Control-C) which we will paste in place (Control-F) and then adjust by flipping its Stroke with its Fill (Shift-X). Once you’re done, select and group (Control-G) the two shapes together, doing the same for the entire icon afterwards.

finishing off the bring to front icon

18. How to Create the Send to Back Icon

By now, you already know the drill, so jump on the next Artboard and let’s carry on working on our next item.

Step 1

Create the back shape using a 12 x 12 px square with a 4 px thick Stroke (#252A2D), which we will align to the active drawing area’s top-left corner.

creating the back shape of the send to back icon

Step 2

Finish off the current icon by adding the front shape using another 12 x 12 px square with a 4 px thick Stroke (#252A2D) and a 12 x 12 px fill shape (#252A2D), which we will group (Control-G) and then align to the active drawing area’s bottom-right corner. Once you’re done, select and group (Control-G) all of the shapes together before moving on to the next one.

finishing off the send to back icon

19. How to Create the Insert Header Icon

Make sure you’ve positioned yourself onto the empty neighboring Artboard, and then let’s get started working on our next icon.

Step 1

Create the upper section using a 20 x 6 px rectangle with a 4 px thick Stroke, which we will color using #252A2D and then center align to the active drawing area’s top edge.

creating the upper section of the insert header icon

Step 2

Add the main shape for the lower section using a 20 x 8 px rectangle with a 4 px thick Stroke (#252A2D), which we will position so that its bottom path overlaps the edge of the active drawing area, as seen in the reference image.

creating the lower section of the insert header icon

Step 3

Open up the path of the shape that we’ve just created by adding a new anchor point to the center of its bottom edge using the Add Anchor Point Tool (+) and then immediately selecting and removing it by pressing Delete.

adjusting the lower section of the insert header icon

Step 4

Finish off the icon by adding the little fill segment using a 12 x 4 px rectangle (#252A2D), which we will center align to the active drawing area’s bottom edge. Once you’re done, select and group all of the composing shapes together using the Control-G keyboard shortcut.

finishing off the insert header icon

20. How to Create the Insert Footer Icon

Next, we’re going to quickly create another version of the header icon, so make sure you position yourself onto the next active drawing area, and let’s get started.

Step 1

Create a copy (Control-C) of the previous icon, which we will then paste onto the current Artboard using the Control-F keyboard shortcut.

creating the main shapes for the insert footer icon

Step 2

Finish off the current icon by horizontally reflecting the copy that we’ve just created (right click > Transform > Reflect > Horizontal), making sure to center it again afterwards.

finishing off the insert footer icon

21. How to Create the List Icon

Our next item is a must have for any good text editors, so hop on down to the next row and let’s jump straight into it.

Step 1

Create the upper bullet using a 4 x 4 px square, which we will color using #252A2D and then align to the active drawing area’s left edge, positioning it at a distance of 2 px from its top one.

creating the main bullet for the list icon

Step 2

Add the list item using a 16 px wide 4 px thick Stroke line (#252A2D), which we will position next to the bullet as seen in the reference image, making sure to select and group (Control-G) the two together before moving on to the next step.

adding the top horizontal line to the list icon

Step 3

Finish off the icon by creating two copies (Control-C > Control-F twice) of the shapes that we’ve just grouped, which we will vertically stack below at a distance of 4 px from the original. Once you have your shapes in place, don’t forget to select and group all of them together using the Control-G keyboard shortcut.

finishing off the list icon

22. How to Create the Sublist Icon

We now have a list icon, but how about we move on to the next Artboard and create a sub-level one.

Step 1

Start by creating a copy (Control-C) of the previous icon, which we will paste onto the current active drawing area using the Control-F keyboard shortcut.

creating the main shapes for the sublist icon

Step 2

Finish off the current icon by isolating the middle and bottom list items, and then adjusting their length so that their bullets align to the top one as seen in the reference image. Take your time, and once you’re done, exit Isolation Mode by pressing the Escape key.

finishing off the sublist icon

23. How to Create the Insert Page Break Icon

Number 19 off our items’ list is the page break icon, which we will create in a blink of an eye.

Step 1

Start by creating the center line using a 24 px wide 4 px thick Stroke, which we will color using #252A2D and then center align to the underlying Artboard.

creating the center line for the insert page break icon

Step 2

Add the main shapes for the pages using two 12 x 6 px rectangles with a 4 px thick Stroke (#252A2D), which we will position onto the top and bottom edges of the active drawing area as seen in the reference image.

adding the main rectangles for the insert page break icon

Step 3

Finish off the icon by opening up the paths of the shapes that we’ve just created by adding a new anchor point to the center of their outer edges and then immediately selecting and removing them using the Delete key. Once you’re done, select and group all three shapes together using the Control-G keyboard shortcut.

finishing off the insert page break icon

24. How to Create the Resize Icon

Next off, we have another simple yet useful tool that most of the time goes overlooked, but not today.

Step 1

Create the icon’s main body using a 20 x 20 px square with a 4 px thick Stroke (#252A2D), which we will center align to the underlying Artboard.

creating the main shape for the resize icon

Step 2

Finish off the current icon by creating a smaller 12 x 12 px square with a 4 px thick Stroke (#252A2D), which we will align to the active drawing area’s bottom-right corner. Once you’re done, don’t forget to select and group (Control-G) the two together before moving on to the next one.

finishing off the resize icon

25. How to Create the Shapes Icon

We are now down to our sixth and last row of icons, so assuming you’ve already positioned yourself onto the first of its Artboards, let’s create our next item.

Step 1

Start by creating a 16 x 16 px circle with a 4 px thick Stroke, which we will color using #252A2D and then align to the active drawing area’s top-left corner.

creating the circle for the shapes icon

Step 2 

Add a smaller 12 x 12 px square with a 4 px thick Stroke (#252A2D), which we will position on the circle as seen in the reference image.

adding the square to the shapes icon

Step 3

Finish off the current icon by adding a set of new anchor points to the edges of the square where the two paths overlap using the Add Anchor Point Tool (+), and then selecting and removing its corner one using the Delete key. As always, don’t forget to select and group (Control-G) the two shapes together once you’re done.

finishing off the shapes icon

26. How to Create the Chart Icon

If you love charts, you’ll be happy to know that we’re going to be building one of our own in the following moments.

Step 1

Create the lower section of the icon using a 24 px wide 4 px thick Stroke line (#252A2D), which we will center align to the active drawing area’s bottom edge.

creating the lower section of the chart icon

Step 2

Add the vertical chart segments using three 16 px tall 4 px thick Strokes (#252A2D), which we will position 4 px from one another horizontally, and then center align them to the active drawing area’s top edge.

adding the vertical lines to the chart icon

Step 3

Finish off the chart, by adjusting the length of its outer vertical segments as seen in the reference image. Take your time, and once you’re done, make sure you select and group (Control-G) all of the icon’s composing shapes before moving on to the next one.

finishing off the chart icon

27. How to Create the Table Icon

The next item off our list is one that you probably use quite a lot, so make sure you position yourself onto the next Artboard, and let’s quickly learn how to create it.

Step 1

Start working on the upper section by creating an 8 x 8 px square with a 4 px thick Stroke (#252A2D), which we will align to the active drawing area’s top-left corner.

creating the smaller square for the table icon

Step 2

Add a wider 12 x 8 px one with the same 4 px thick Stroke (#252A2D), which we will position onto the square’s right side so that their outlines overlap.

adding the top rectangle to the table icon

Step 3

Create the left shape for the icon’s lower section using an 8 x 12 px rectangle with a 4 px thick Stroke (#252A2D), which we will align to the active drawing area’s bottom-left corner.

adding the bottom rectangle to the table icon

Step 4

Finish off the current icon by adding a 12 x 12 px square with a 4 px thick Stroke (#252A2D) in the lower-right corner of the active drawing area, making sure to select and group all four shapes together afterwards using the Control-G keyboard shortcut.

finishing off the table icon

28. How to Create the Ruler Icon

We are now down to our last icon, so make your way to the remaining Artboard, and let’s wrap things up!

Step 1

Create the upper section of the ruler using a 20 x 6 px rectangle with a 4 px thick Stroke (#252A2D), which we will center align to the active drawing area’s top edge.

creating the upper section of the ruler icon

Step 2

Finish off the icon, and with it the project itself, by adding a 6 x 20 px rectangle with a 4 px thick Stroke (#252A2D), which we will center align to the active drawing area’s left edge. As always, once you’re done, don’t forget to select and group (Control-G) the two shapes together before hitting that save button.

finishing off the ruler icon

Great Job!

It might have been a longer one than usual, but if you made it to the end, you should now have a nice little practical icon set that you can put to use in any future project.

As always, I hope you’ve managed to keep up with each and every step and learned something new and useful along the way.

That being said, if you have any questions, feel free to post them within the comments section and I’ll get back to you as soon as I can!

finished project preview
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.