Draw an icon from a simple shape, and then make it a symbol so you can update it easily throughout your design in Adobe XD CC.
create-map-pin-icon_1000x560

Draw a map pin from two concentric circles and use a Boolean operator to create a punched-out effect. Convert the shape to a path by holding Control (or command) as you click the outer circle. Then, double-click to see the anchor points. Pull down on the bottom anchor point and double-click to convert it from a curved path to an angled one. Finally, style the icon with a Fill color and Shadow.

create-map-pin-icon_step1

Convert your map pin to a symbol to use throughout your design. Click the icon, and then click + next to Symbols in the Assets panel. Double-click the label and rename it to make it easier to find later. Place the new icon as many times as you need to throughout your design.

create-map-pin-icon_step2

Once your icon is a symbol, experiment with color and style. Change the appearance of one symbol and see how it affects your overall design.

create-map-pin-icon_step3

Here’s the map pin style we liked for this app design.

create-map-pin-icon_step4

Now you can create app icons using a few basic shapes and symbols.

11/05/2018

Adobe Stock contributor: ty

 

Was this page helpful?