Ilustration: Create a Set of Medical Icons

By Freepik Academy 2 weeks ago

Hi and welcome back to another icon tutorial in which we’re going to explore the process of creating four little icons using nothing more than the basic shapes and tools that you probably already work with on a daily basis. That being said, grab a cup of freshly brewed coffee and let’s jump straight into it!

How to Set Up a New Document

As we do with all of our projects, we’ll start by setting up a New Document (File → New or Control + N) which we will adjust using the following settings:

  • Number of Artboards: 1
  • Width: 800 px
  • Height: 600 px
  • Units: Pixels

And from the Advanced tab:

  • Color Mode: RGB
  • Raster Effects: Screen (72 ppi)

We’re going to be creating the icons using a Pixel Perfect Workflow, so I highly recommend you take a moment and read this in depth tutorial ( http://www.freepik.com/blog/how-to-create-pixel-perfect-icons/) that will get you up to speed in no time.

1-setting-up-a-new-document1.png

How to Set Up the Layers

Once I have my new document, I like to separate my assets using a couple of different layers, since this way I can streamline my workflow by focusing on one item at a time, which allows me to keep track of each and every shape at all time.

So, open up the Layers panel, and let’s create a total of five layers which we will name as follows:

  • Layer 1 → reference grids
  • Layer 2 → iv drip
  • Layer 3 → pill blister
  • Layer 4 → stethoscope
  • Layer 5 → clipboard
2-setting-up-the-layers1.png

The way we’re going to be using these layers within our workflow is pretty easy. We’ll want to lock all except the one that we will be working on, so that we won’t move or misplace some of the shapes by accident. Then, once we’re done with the current icon, we can then lock its layer and move on up to the next one.

How to Create the Reference Grids

As soon as we’ve layered our project file, we can start creating the reference grids, which will help us create our icons by focusing on consistency and size.

Step 1

Grab the Rectangle Tool (M) and create a 128×128 px square, which we will color using #F15A24, and then position it to the center of the Artboard using the Align panel’s Horizontal and Vertical Align Center options.

3-creating-the-main-shape-for-the-reference-grids1.png

Step 2

Create another smaller 120×120 px square, which will act as the active drawing area, thus giving us an all-around 4 px padding. Color the shape using white (#FFFFFF) and then group the squares (Control + G) and create three more side copies (Control + C → Control + F three times), distancing them at 40 px from the original.

4-creating-and-positioning-the-remaining-reference-grids1.png

Once you’re done creating and positioning the reference grids, you can lock their layer, and then move on up to the next one, where we’ll start working on our first icon.

How to Create the IV Drip Icon

Assuming you’ve positioned yourself onto the next layer (that would be the second one), let’s kick off the project by creating the first icon, which is the little IV drip.

Step 1

Start by creating the bag’s main body using a 40×56 px rounded rectangle with an 8 px Corner Radius, which we will color using #A7B4D1, and then position onto the active drawing area, at a distance of 18 px from its left edge and 10 px from its top one.

5-creating-and-positioning-the-main-fill-shape-for-the-iv-drips-bag.png

Step 2

Adjust the shape that we’ve just created by setting the Radius of its bottom corners to 16 px from within the Transform panel’s Rectangle Properties.

6-adjusting-the-shape-of-the-iv-drips-bag.png

Step 3

Give the resulting shape an outline using the Stroke method, by creating a copy of it (Control + C) which we will paste in front (Control + F), and then adjust by first changing its color to #2B3249 and then flipping its Fill with its Stroke (Shift + X). Set the resulting shape’s Weight to 4 px, making sure to select and group the two together afterwards using the Control + G keyboard shortcut.

7-adding-the-outline-to-the-iv-drips-bag.png

Step 4

Create the little string section using an 8×8 px square with a 4 px thick Stroke (#2B3249), which we will adjust by setting the Radius of its top corners to 4 px from within the Transform panel’s Rectangle Properties. Once you’re done, position the resulting shape above the larger bag as seen in the reference image.

8-adding-the-string-section-to-the-iv-drips-bag.png

Step 5

Add the horizontal detail line using a 16×4 px rounded rectangle with a 2 pxCorner Radius, which we will color using #2B3249, and then center align to the larger body, positioning it at a distance of 4 px from its top edge.

9-adding-the-horizontal-detail-line-to-the-iv-drips-bag.png

Step 6

Create the little info patch using a 16×20 px rectangle (#EBEDEC) with a 4 px thick outline (#2B3249), which we will group (Control + G) and then position below the previously created shape, at a distance of just 4 px (6 pxusing the Align panel’s Distribute Spacing option).

10-adding-the-info-patch-to-the-iv-drips-bag.png

Step 7

Add the little dummy text lines using a 4×2 px rectangle (#2B3249) followed by another 8×2 px one (#2B3249), which we will vertically stack at a distance of 2 px from one another, grouping (Control + G) and then positioning them at a distance of 2 px from the patch’s left edge, and 4 px from its top one. Once you’re done, select both the lines and the patch and group (Control + G) those together as well.

11-adding-the-dummy-text-lines-to-the-iv-drips-bag.png

Step 8

Take a couple of moments and create the little volume level indicator lines using four 4 px thick Stroke lines (#2B3249), vertically stacked at 2 px from one another, which we will group (Control + G) and then position onto the left side of the bag, at a distance of 14 px from its bottom edge.

12-adding-the-volume-level-indicator-lines-to-the-iv-drips-bag.png

Step 9

Add the little bumpy texture using nine 2×2 px circles (#2B3249), which we will position as seen in the reference image. Once you’re done, select and group (Control + G) all the circles together, doing the same for the entire bag afterwards before moving on to the next step.

13-adding-the-bumpy-texture-to-the-iv-drips-bag.png

Step 10

Create the drip port’s main body using an 8×8 px square (#ED795A) with a 4 px thick outline (#2B3249), which we will group (Control + G) and then position below the larger bag.

14-adding-the-drip-port-to-the-iv-drips-bag.png

Step 11

Add the top insertion using a 2×4 px rectangle (#2B3249), which we will center align to the port’s top edge.

15-adding-the-rectangular-insertion-to-the-iv-bags-drip-port.png

Step 12

Create a 16×4 px rectangle, which we will color using #2B3249 and then position over the port outline’s bottom edge.

16-adding-the-larger-rectangle-to-the-iv-bags-drip-port.png

Step 13

Add another slightly smaller 8×4 px rectangle (#2B3249) underneath the one from the previous step, selecting and grouping (Control + G) all of the drip port’s composing shapes together, doing the same for the entire bag afterwards.

17-adding-the-smaller-rectangle-to-the-iv-bags-drip-port.png

Step 14

Start working on the drip line by drawing its main body using a 4 px thick Stroke line (#2B3249) using the reference image as your main guide. Take your time, and once you’re done move on to the next step.

18-drawing-the-iv-bags-drip-line.png

Step 15

Add some curvatures to the line, by first selecting its bottom corners using the Direct Selection Tool (A) and then setting their Radius to 16 px using the Live Corners input box. Once you’re done, do the same for the top corners, only this time set their Radius to just 13 px.

19-adjusting-the-curvatures-of-the-iv-bags-drip-line.png

Step 16

Start working on the clamp by creating its main body using a 6×12 px rectangle (#ED795A) with a 4 px thick outline (#2B3249), which we will group (Control + G) and then position onto the center section of the drop line, at a distance of 24 px from its top edge.

20-creating-and-positioning-the-main-shapes-for-the-iv-bags-drip-clamp.png

Step 17

Give the clamp a rectangular insertion using a 3×4 px rectangle (#2B3249), which we will center align to the larger body’s right edge.

21-adding-the-rectangular-insertion-to-the-iv-bags-drip-clamp.png

Step 18

Add the little wheel using a 6×6 px circle (#2B3249), which we will position onto the clamp’s right side. Once you’re done, select and group (Control + G) all its composing shapes together before moving on to the next step.

22-adding-the-little-wheel-to-the-iv-bags-drip-clamp.png

Step 19

Start working on the luer lock by creating its main body using an 8×12 px rectangle (#ED795A) with a 4 pxbottom corner Radius and a 4 px thick outline (#2B3249), which we will group (Control + G) and then position onto the end section of the drip line.

23-creating-and-positioning-the-main-shapes-for-the-iv-bags-luer-lock.png

Step 20

Add the little insertion using a 2×4 px rectangle (#2B3249), which we will center align to the lock’s top edge.

24-adding-the-rectangular-insertion-to-the-iv-bags-luer-lock.png

Step 21

Create an 8×4 px rectangle (#2B3249) which we will vertically stack on top of another slightly larger 16×4 px one (#2B3249), which we will group (Control + G) and then position on top of the lock outline’s top edge.

25-adding-the-two-rectangle-details-to-the-iv-bags-luer-lock.png

Step 22

Add the little needle using a 10 px tall 2 px thick Stroke line (#2B3249), which we will position onto its bottom-facing tip. Once you’re done, select and group (Control + G) all of the current section’s composing shapes doing the same for the entire IV kit afterwards.

26-adding-the-needle-section-to-the-iv-bags-luer-lock.png

Step 23

Finish off the icon, by adding the subtle circular shadow using an 88×12 px ellipse, which we will color using #DCDFE5, and then center align to the active drawing area’s bottom edge. Once you’re done, select and group (Control + G) all of its composing sections before moving on to the next one.

27-finishing-off-the-iv-drip-icon.png

How to Create the Pill Blister Icon

Assuming you’ve successfully finished working on the first icon, lock its layer and then move on to the next one (that would be the third one), where we will focus on creating the little blister.

Step 1

Create the icon’s main body using a 72×92 px rounded rectangle (#A7B4D1) with an 8 px Corner Radius and a 4 px thick outline (#2B3249), which we will group (Control + G) and then center align to the active drawing area’s top edge.

28-creating-and-positioning-the-main-shapes-for-the-blisters-main-body.png

Step 2

Add the vertical divider line using a 4×56 px rounded rectangle (#2B3249) with a 2 px Corner Radius, which we will center align to the previously grouped shapes.

29-adding-the-vertical-divider-line-to-the-blisters-main-body.png

Step 3

Create the top insertion using a 16×16 px circle (#7E8EA8), which we will adjust by removing its top half by selecting its top anchor point using the Direct Selection Tool (A) and then pressing Delete. Give the resulting shape a 4 px thick outline (#2B3249), grouping (Control + G) and then center aligning the two to the larger body’s top edge.

30-adding-the-top-circular-insertion-to-the-blisters-main-body.png

Step 4

Add the bottom insertion using a copy (Control + C → Control + F) of the one that we’ve just finished working on, which we will horizontally reflect (Right click → Transform → Reflect → Horizontal) and then position onto the opposite side of the blister. Once you’re done, select and group (Control + G) all of the shapes that we have so far before moving on to the next step.

31-adding-the-bottom-circular-insertion-to-the-blisters-main-body.png

Step 5

Start working on the first pill, by creating its left half using a 10×8 px rectangle (#EBEDEC) with a 4 px left corner Radius and a 4 px thick outline (#2B3249), which we will group (Control + G) and then position at a distance of 4 px from the blister’s left edge and 8 px from its top one.

32-creating-and-positioning-the-main-shapes-for-the-first-pills-left-half.png

Step 6

Create the pill’s right half, using a copy of the one that we’ve just finished working on which we will vertically reflect (right click → Transform → Reflect → Vertical) and then position onto the opposite side. Once you’re done, select and group (Control + G) both composing sections together before moving on to the next step.

33-creating-and-positioning-the-main-shapes-for-the-first-pills-right-half.png

Step 7

Create the left section pills using three copies (Control + C → Control + F three times) of the one that we’ve just finished working on, which we will vertically stack at a distance of 12 px from one another as seen in the reference image.

34-adding-the-remaining-pills-to-the-blisters-left-half.png

Step 8

Add the little texture bubbles using three groups of four 2×2 px circles (#2B3249) horizontally distanced at 2 px from one another, which we will individually group (Control + G), positioning one between each of the pills. Take your time, and once you’re done, select and group both the bubbles and the pills together using the Control + G keyboard shortcut.

35-adding-the-texture-bubbles-to-the-blisters-left-half.png

Step 9

Create the blister’s right sided pills using a copy (Control + C → Control + F) of the shapes that we’ve just grouped, which we will position onto the opposite side of the vertical divider. Once you’re done, select and group (Control + G) all its composing sections before moving on to the next step.

36-adding-the-blisters-right-sided-details.png

Step 10

As we did with the previous icon, finish off the current one by adding the subtle circular shadow using an 88×12 px ellipse, which we will color using #DCDFE5, and then center align to the active drawing area’s bottom edge. Once you’re done, select and group (Control + G) all of its composing sections before moving on to the third one.

37-finishing-off-the-pill-blister-icon.png

How to Create the Stethoscope Icon

Assuming you’ve finished working on the second icon, move on up to the next layer (that would be the fourth one) where we’ll start working on the stethoscope.

Step 1

Start working on the binaural section by creating a 52×56 px rectangle with a 4 px thick Stroke (#2B3249), which we will adjust by setting the Radius of its top corners to 8 px and its bottom ones to 26 px. Once you’re done, position the resulting shape at a distance of 16 px from the active drawing area’s left edge, and 4 px from its top one.

38-creating-and-positioning-the-main-shape-for-the-stethoscopes-binaural-section.png

Step 2

Turn on the Pixel Preview mode (Alt + Control + Y) and then adjust the shape of the current section by adding a new anchor point to the center of its top edge, followed by two side ones positioned at a distance of just 2 pxfrom its top corners.

39-adjusting-the-shape-of-the-stethoscopes-binaural-section.png

Step 3

Open up the path by selecting the center anchor point that we’ve just created using the Direct Selection Tool (A), which we will then remove by pressing Delete.

40-opening-up-the-path-of-the-stethoscopes-binaural-section.png

Step 4

Create the earpieces using two 8×8 px circles (#ED795A) with a 4 px thick outline (#2B3249), which we will individually group (Control + G) and then position onto each end of the path that we’ve just finished working on.

41-adding-the-stethoscopes-earpieces.png

Step 5

Create the circular bridge connecting the open path’s two sections using a copy of it (Control + C → Control + F), which we will adjust by selecting its top corners using the Direct Selection Tool (A) and then removing them by pressing Delete. Once you’re done, push the resulting shape to the top by a distance of 8 px using the Move tool (right click → Transform → Move → Vertical → -8 px).

42-adding-the-circular-bridge-to-the-stethoscopes-binaural-section.png

Step 6

Create the sound conductor section using an 8×8 px rectangle (#ED795A) which we will adjust by setting the Radius of its bottom corners to 4 px from within the Transform panel’s Rectangle Properties. Give the resulting shape a 4 px thick outline (#2B3249) followed by a 2×4 px rectangular insertion (#2B3249) to the center of its top edge, grouping (Control + G) and then positioning all three shapes below the binaural section. Once you’re done, select and group (Control + G) all of the shapes that we have so far before moving on to the next step.

43-creating-and-positioning-the-main-shapes-for-the-stethoscopes-sound-conductor.png

Step 7

Take a couple of moments and draw the tube section using a 4 px thick Stroke line (#2B3249), which we will position as seen in the reference image.

44-drawing-the-stethoscopes-tube-section.png

Step 8

Adjust the curvature of the tube’s bottom section, by setting the Radius of its two corners to 24 px from within the Live Corners input box.

45-adjusting-the-curvature-of-the-stethoscopes-tube-section.png

Step 9

Create the chestpiece using a 20×20 px circle (#A7B4D1) with a 4 px thick outline (#2B3249), which we will group (Control + G) and then position onto the right end of the tube section.

46-creating-and-positioning-the-main-shapes-for-the-stethoscopes-chestpiece1.png

Step 10

Start adding details to the current section by creating an 8×8 px circle, which we will color using #2B3249 and then center align to the centerpiece’s larger body.

47-adding-the-center-circle-to-the-stethoscopes-chestpiece1.png

Step 11

Create a 4×6 px rounded rectangle (#2B3249) with a 2 px Corner Radius, which we will position onto the upper half of the previously created circle.

48-adding-the-rounded-rectangle-to-the-stethoscopes-chestpiece1.png

Step 12

Add the stem using an 8×8 px square (#2B3249), which we will position below the chestpiece’s main body. Once you’re done, select and group (Control + G) all of the current section’s composing shapes together, doing the same for the entire stethoscope afterwards.

49-adding-the-stem-to-the-stethoscopes-chestpiece1.png

Step 13

Finish off the icon by adding the subtle circular shadow using an 88×12 px ellipse, which we will color using #DCDFE5, and then center align to the active drawing area’s bottom edge. Once you’re done, select and group (Control + G) all of its composing sections before moving on to the last one.

50-finishing-off-the-stethoscope-icon1.png

How to Create the Clipboard Icon

We are now down to our fourth and last icon, so assuming you’ve already moved on to the next layer, zoom in its reference grid and let’s finish this.

Step 1

Start working on the little clip’s body by creating a 16×6 px rectangle, which we will color using #ED795A, and then center align to the active drawing area’s top edge, positioning it at a distance of just 2 px.

51-creating-and-positioning-the-main-shape-for-the-upper-section-of-the-clipboards-clip1.png

Step 2

Create the clip’s bottom section using a 36×6 px rectangle (#ED795A), which we will position below the smaller one that we’ve just created, uniting them into a single larger shape afterwards using Pathfinder’s Unite Shape Mode.

52-creating-and-positioning-the-main-shape-for-the-bottom-section-of-the-clipboards-clip1.png

Step 3

Adjust the resulting shape, by individually selecting and setting the Radius of its corners as follows:

  • Top center corners: 4 px 
  • Center inner facing corners: 2 px 
  • Outer top corners: 4 px 
53-adjusting-the-shape-of-the-clipboards-clip1.png

Step 4

Give the resulting shape a 4 px thick outline (#2B3249), followed by a 4×4 px circle (#2B3249) positioned towards its center. Before you move on to the next step, don’t forget to select and group all three shapes together using the Control + G keyboard shortcut.

54-adding-the-outline-and-circle-to-the-clipboards-clip.png

Step 5

Create the clipboard’s main body using a 60×80 px rounded rectangle (#A7B4D1) with an 8 px Corner Radiusand a 4 px thick outline (#2B3249), which we will group (Control + G) and then position below the smaller clip.

55-creating-and-positioning-the-main-shapes-for-the-clipboards-main-body.png

Step 6

Add the paper sheet using a 48×68 px rounded rectangle (#EBEDEC) with a 4 px Corner Radius and a 4 pxthick outline (#2B3249), which we will group (Control + G) and then center align to the clipboard’s main body.

56-creating-and-positioning-the-main-shapes-for-the-clipboards-paper-sheet.png

Step 7

Start adding details to the paper, by creating the little checkbox using an 8×8 px square (#ED795A) with a 4 pxthick outline (#2B3249), which we will group (Control + G) and then position at a distance of 4 px from its outline’s left edge, and 12 px from its top one.

57-adding-the-first-checkbox-to-the-clipboards-paper-sheet.png

Step 8

Add the dummy text lines using a 10×2 px rectangle (#2B3249) which we will vertically stack at a distance of 2 px from another slightly larger 20×2 px one (#2B3249), grouping (Control + G) and then positioning the two onto the right side of the checkbox, at a distance of just 4 px. Once you’re done, select both the lines and the checkbox and group them together using the Control + G keyboard shortcut.

58-adding-the-text-lines-to-the-clipboards-first-checkbox.png

Step 9

Create the remaining checkboxes using two copies (Control + C → Control + F twice) of the shapes that we’ve just grouped, which we will vertically stack at a distance of 4 px from the original.

59-adding-the-remaining-checkboxes-to-the-clipboard.png

Step 10

Add the signature dots using four 2×2 px circles (#2B3249), which we will horizontally distance at 2 px fom one another, grouping (Control + G) and then positioning them at a distance of 4 px from the paper sheet’s bottom-right corner. Once you’re done, select and group (Control + G) all of the paper sheet’s composing sections together before moving on to the next step.

60-adding-the-signature-dots-to-the-clipboards-paper-sheet.png

Step 11

Start working on the actual clip by creatings its main body using a 24×14 px rectangle with a 4 px thick Stroke(#2B3249), which we will center align to the cliboard’s larger body.

61-adding-the-clip-section-to-the-clipboards-main-body.png

Step 12

Create another smaller 12×8 px rectangle (#2B3249), which we will position to the center of the clip’s bottom edge. Once you’re done, select and group (Control + G) all of the current section’s composing shapes together, doing the same for the entire clipboard afterwards.

62-adding-the-smaller-rectangle-to-the-clipboards-clip.png

Step 13

Finish off the icon and with it the project itself by adding the subtle circular shadow using an 88×12 px ellipse (#DCDFE5), which we will center align to the active drawing area’s bottom edge. Once you’re done, select and group (Control + G) all of its composing sections before saving your work.

63-finishing-off-the-clipboard-icon.png

Great Job!

There you have it ladies and gents, a nice little tutorial on how to create your very own medical themed icon pack using nothing more than the basic shapes and tools that you probably already work with on a daily basis.

64-final-result-preview.png

Comments