Note: This tutorial is an English translation tutorial, the software operation is not skilled friends, try carefully. If there is a lack of translation or a typo, make up for it yourself. There are friends who have seen it, warm and new.
1. Create a new document
File > New, open a blank document, as shown in the figure settings.
2. Set the reference grid
Step 1
Go to Edit > Preferences> Guide and Grid, and type 10 pixels of gridline spacer fields and 10 subdivisions. This creates a gridline at each pixel in the document.
Step 2
Under the View menu, make sure Show grid is checked to make it visible, and that Snap to grid and Snap point are selected.
Step 3
Grasp the Rectangle Tool (M) and draw a 200 x 182 pixel rectangle. align its corners with the grid; Then go to the object > artboards > convert to artboards. This will define a new little artboard in your document, which is the size of our icon.
3. Create a Coin Symbol purchase icon
Step 1
Grab the Segment Tool (\), click on the artboard, and draw a path of 26 px at an angle of 0 degrees. Give it a 14-pound trip and press the "Round Cap" option in the Stroke panel to get rounded corners.
While the path remains selected, go to the Alignment panel and make sure Align with Artboard is selected. Now, press Align Left Horizontally and then Align Vertically Up. The path jumps to the upper-left corner of the artboard.
Step 2
To place the first path where you want it in the artboard, go to Object > Transform > Move and type 7 px in the Horizontal and Vertical fields. Click OK.
Step 3
Grab the Segment Tool (\) again, click on the artboard, and draw a 134-pixel path at a 108-degree angle. Give it a 14-pound trip and select the "Round Cap" option in the Trips panel. Use the Direct Selection Tool (A) to grab it and align its highest point with the end point of the first path.
Step 4
Use the Line Segment Tool (\) to draw a new path with a length of 35 pixels. Apply the same appearance as the previous two paths. In the Alignment panel, press Align Top Vertically, and then Align Right Horizontally to place it in the upper-right corner of the artboard.
When the path remains selected, go to Object > Transform > Move, and type -7 pixels in the Horizontal field and 34 pixels in the Vertical field. Click OK.
Step 5
The Take Segment Tool (\) draws an 80 pixel again at a 72 degree angle in the path. Apply the same appearance to it; Then grab it using the Direct Selection Tool (A) and align its highest point with the end point of the previous path.
Step 6
Draw the next path 100 pixels long and apply the same look. Align its right point with the end point of the previous path.
Step 7
Now, select the path shown below, and then select Copy and paste in front (Ctrl-F) to copy. Use the left arrow key on your keyboard to move it left along the gridlines.
Step 8
It's time to create the wheel of the shopping cart. Grasp the Ellipse Tool (L) and draw a 52 x 52 px circle, then press Align Bottom Vertically in the Alignment panel to ensure it stays at the bottom of the artboard. Align the path above it (you can use the end center guide line to make this job easier).
Copy and paste this circle in front (Ctrl-F) and move it to the left to get the second wheel.
Step 9
Keep the first wheel selected, then go to Object> Transform > Scale. Type a 45% uniform scale field. This will create a smaller circle inside. Repeat the same operation for the other wheel.
Now, select the first wheel and the small circle on top of it again and press minus in the Pathfinder panel. This will create a hole inside the wheel. Repeat the same operation for the second wheel.
Step 10
Use the Segment Tool (\) to draw a path of 90 pixels and apply the same appearance. Use a grid to arrange it between the wheels.
Step 11
Next, use the Ellipse Tool (L) and draw an 84 x 84 pixel circle. Press Align Right Horizontally, and then Align Vertically to place this shape in the upper-right corner of the artboard. Use the grid to move it one square to the left (10 subdivisions).
Step 12
Let's move on to icon design with the dollar sign. Grab the Font Tool (T) and write the letter "S" inside the circle using the 72-pound Poppins Thin font. The fill color is not important. Also, give it a 6-pound stroke and press "Round Cap" and "Round Join" in the Strokes panel with the same color. This will make the letters thicker and the ends rounded.
Next, draw a vertical path about 54 px in length and place it in the center of the letter "S" to get a dollar sign. Give it a 6-pound trip and press the Round Cap option in the Trip panel.
Step 13
Use the Segment Tool (\) to draw a new path with a length of 120 px at 0 degree Angle. Give it a 12-pound trip, move it to the center of the cart, and send it behind the circle.
Step 14
Select the dollar sign and go to Object > Expand twice to expand the text and applied strokes. Press Unite in the Pathfinder panel to merge them into one shape (1).
Now, select the dollar shape together with the circle, and press Minus in the Pathfinder panel to subtract it from the circle (2).
Before proceeding and before expanding the path, make two copies of the entire icon for later.
Step 15
Select all the stroke paths that make up the cart and go to Object > Expand to turn it into a filled shape. At this point, we need to make some small adjustments. Use the Direct Selection Tool (A) to select only the three points indicated (1) and move them to the right by pressing the Right Arrow key on your keyboard until you don't see the blue shape inside the dollar sign (2).
Do the same at the bottom of the dollar sign and use the Add Anchor Point Tool (+) to add three extra points to distort the blue shape. With the Direct Selection Tool (A), move down the middle point until you don't see the blue shape inside the dollar sign (3).
Step 16
At this point, the Coin Symbol purchase icon is ready. All shapes can be selected, then the pathfinder connects, and then the object > compound path> making (control-8) merge everything into a single compound path.
This step is optional. You can separate the shapes and fill them with different colors you like.
4. Create a "plus" purchase icon
The second icon also consists of a minimal cart icon, but we will change the style slightly and add a plus symbol.
Step 1
Use the Rectangle Tool (M) to draw a new 200 x 182 px rectangle and go to Object > Artboard > Convert to Artboard to define a new artboard in your document. Now, take a copy of the "Dollar Sign" purchase icon made earlier in this tutorial and group all the shapes (Control-G). Press Align Center Horizontally and Align Center Vertically in the Alignment panel to ensure that the icon stays in the new artboard (1).
Use the Direct Selection Tool (A) to select only the indicated points and move them to the right to remove the blanks up to the circle (2). Next, use the Pen Tool (P) and draw the shape shown in the image below to cover the bottom of the cart (3).
Step 2
Select all the stroke paths that make up the icon, and go to Object > Expand to turn it into a filled shape (1). Now, select all the blue shapes to form the icon (not round), then Pathfinder connects, and then objects > compound paths> make (control-8) merge them into a single compound path (2).
Step 3
Now, focus on the circle. Leave it selected, then press Align Horizontally to Right, then Align Top Vertically to place the circle in the upper-right corner of the artboard (1). In addition to the pink fill, you should apply an 8-point stroke and press the Align Stroke to Outside option in the Strokes panel. Add a new stroke at the top, then select the 12-point stroke, this time, select the Align stroke with interior option in the Strokes panel. Currently, color doesn't matter (2).
With the circle still selected, go to Object > Expand Appearance, and then click Ungroup (Shift-Ctrl-G) to get the individual circular shapes (3).
Step 4
Remove the pink circle because you don't need it. Select a larger ring shape (green), go to Object > Compound Path > Release and you will get two green circles. Delete the smaller one and keep the larger one (2).
Now, select the compound path of the cart along with the green circle and press Minus in the Pathfinder panel to subtract it from the cart (3).
Step 5
Let's finish the icon design with the plus symbol. Use the Segment Tool (\) to create a vertical path (1) and a horizontal path (2) with a length of 34 pixels. Give them two 12-pound trips and select the "Round Cap" option in the Trips panel to get rounded corners.
When both paths remain selected, go to Objects > Expand to turn them into filled shapes, and press Unite(3) in the Pathfinder panel.
Step 6
At this point, the "plus" purchase icon is ready. You can select all the objects that make it up and the Pathfinder link, and then the object > compound path > make (control-8) to get the path to a single compound.
This step is optional. You can separate the shapes and fill them with different colors you like.
5. How to create an "arrow symbol" purchase icon
The last icon consists of the same minimal cart icon, but we will make an arrow symbol to complete the design.
Step 1
Use the Rectangle Tool (M) to draw a new 200 x 182 px rectangle and go to Object > Artboard > Convert to Artboard to define a third artboard in your document. Now, as before, take a copy of the first purchase icon you made earlier in this tutorial and align it in a new artboard.
Use the direct selection tool (A) to select only the indicated point (1) and move it to the right until it meets the other end of the cart (2). You can now expand and create a cart compound path like the previous two icons (3).
Step 2
Use the Segment Tool (\) to draw a path with an arrow length of 66 px at a 90-degree angle. Arrange it on top of the artboard, give it 12-pound strokes, and select the Round Cap option to get rounded corners.
Use the Pen Tool (P) as the head of the arrow to draw a V-shaped shape. Give it a 12-pound trip and select the "Round Cap" and "Round Join" options in the Trip panel (2).
Step 3
Copy and paste the paths of the tail and head back (Ctrl-B) and increase the Stroke Width to 28 pt. For visual reasons, I changed the stroke color (1).
Now, select the path of the black stroke and go to Object > Expand to turn it into a filled shape. Press Unite in the Pathfinder panel to merge them into a single shape (black arrow shape). Next, expand the two green paths and merge them to get a green arrow shape (2).
Select the chart compound path with a green arrow and press the path along the Pathfinder minus from the cart (3).
Step 4
At this point, the "Arrow Sign" purchase icon is ready. Select all that make up the Pathfinder connection , and then the object > compound path > enable (control-8) to obtain the path to a single compound.
This step is optional. You can separate the shapes and fill them with the different colors you want.
Step 5
These are the three artboards in the document and the three versions that we made.
Add a background and you're done!