Create icons with basic shapes

We’re creating a notepad and pencil icon. Feel free to download the practice file to follow along. Or, use these concepts to design your own icon. The base shape of the notepad is a square with a line inside it. The pencil starts as a rectangle.

Look for opportunities in your design where you can replicate elements, such as the lines in the notepad. Repeat Grid makes it easy to space them evenly.

Further refine a shape by adding rounded corners, such as the tip of the eraser. Double-click a shape to convert it to a path. Then, add points that you can easily extend into a new design, like we did with the pencil’s tip. We also added lines to give the pencil more detail. Remember to group elements so it’s easier to move objects around in the design.

With everything in place, we applied the finishing touches. We rotated the pencil and moved it into position over the notepad. Then, we made sure the stacking order placed the pencil in front of the notepad. Finally, we applied the colors — a white Border and green Fill gave us the look we wanted.

See how the new icon looks when placed in an app design.

Now you can combine these techniques to create a wide variety of icons for your app and web designs.