Combine a few simple shapes into icons you can use for your app or web design with Adobe XD CC.
mobile-menu-icon_1000x560

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.

mobile-menu-icon_step1

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.

mobile-menu-icon_step2

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.

mobile-menu-icon_step3

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.

mobile-menu-icon_step4

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

mobile-menu-icon_step_5

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

09/12/2018

Contributor: Serge Vasil

Adobe Stock contributor: Leonid

Was this page helpful?