Coffee Cup icon

A free coffee cup icon in 5 styles, drawn by hand on a 24px grid. Copy it as SVG or JSX, for personal or commercial use.

Style Stroke

Category: Food & Drink
Size: 24 × 24, scales to any size
License: Free, credit optional (terms)
Tags: coffee cup, beverage, drink, cafe, hot drink, espresso, morning

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(4 2)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 9.2C0 8.08 0 7.52 0.22 7.09C0.41 6.72 0.72 6.41 1.09 6.22C1.52 6 2.08 6 3.2 6L10.8 6C11.92 6 12.48 6 12.91 6.22C13.28 6.41 13.59 6.72 13.78 7.09C13.9 7.33 13.96 7.61 13.98 8C14 8.31 14 8.7 14 9.2L14 12C14 12.93 14 13.39 13.95 13.78C13.94 13.86 13.93 13.93 13.92 14C13.48 16.59 11.4 18.6 8.78 18.95C8.39 19 7.93 19 7 19C6.07 19 5.61 19 5.22 18.95C2.52 18.59 0.41 16.48 0.05 13.78C0 13.39 0 12.93 0 12L0 9.2Z"/>
  <path transform="translate(4 2)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3 2L3 1.93C3 1.56 3.19 1.21 3.5 1C3.81 0.79 4 0.44 4 0.07L4 0M7 2L7 1.93C7 1.56 7.19 1.21 7.5 1C7.81 0.79 8 0.44 8 0.07L8 0M11 2L11 1.93C11 1.56 11.19 1.21 11.5 1C11.81 0.79 12 0.44 12 0.07L12 0M13.92 14L15 14C16.66 14 18 12.66 18 11C18 9.34 16.66 8 15 8L13.98 8"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path transform="translate(3 1)" fill="currentColor" d="M6 1C6 0.45 5.55 0 5 0C4.45 0 4 0.45 4 1L4 1.07C4 1.11 3.98 1.15 3.95 1.17C3.35 1.56 3 2.22 3 2.93L3 3C3 3.55 3.45 4 4 4C4.55 4 5 3.55 5 3L5 2.93C5 2.89 5.02 2.85 5.05 2.83C5.65 2.44 6 1.78 6 1.07L6 1Z"/>
  <path transform="translate(3 1)" fill="currentColor" d="M10 1C10 0.45 9.55 0 9 0C8.45 0 8 0.45 8 1L8 1.07C8 1.11 7.98 1.15 7.95 1.17C7.35 1.56 7 2.22 7 2.93L7 3C7 3.55 7.45 4 8 4C8.55 4 9 3.55 9 3L9 2.93C9 2.89 9.02 2.85 9.05 2.83C9.65 2.44 10 1.78 10 1.07L10 1Z"/>
  <path transform="translate(3 1)" fill="currentColor" d="M14 1C14 0.45 13.55 0 13 0C12.45 0 12 0.45 12 1L12 1.07C12 1.11 11.98 1.15 11.95 1.17C11.35 1.56 11 2.22 11 2.93L11 3C11 3.55 11.45 4 12 4C12.55 4 13 3.55 13 3L13 2.93C13 2.89 13.02 2.85 13.05 2.83C13.65 2.44 14 1.78 14 1.07L14 1Z"/>
  <path transform="translate(3 1)" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M4.16 6C3.63 6 3.18 6 2.8 6.03C2.41 6.06 2.02 6.13 1.64 6.33C1.07 6.61 0.61 7.07 0.33 7.64C0.13 8.02 0.06 8.41 0.03 8.8C0 9.18 0 9.63 0 10.16L0 13.09C0 13.93 0 14.46 0.06 14.91C0.47 18.05 2.95 20.53 6.09 20.94C6.54 21 7.07 21 7.91 21L8.09 21C8.93 21 9.46 21 9.91 20.94C12.68 20.58 14.93 18.61 15.71 16L16 16C18.21 16 20 14.21 20 12C20 9.79 18.21 8 16 8L15.82 8C15.78 7.88 15.73 7.76 15.67 7.64C15.39 7.07 14.93 6.61 14.36 6.33C13.98 6.13 13.59 6.06 13.2 6.03C12.82 6 12.37 6 11.84 6L4.16 6ZM16 14L16 14C16 13.74 16 13.44 16 13.09L16 10C17.1 10 18 10.9 18 12C18 13.1 17.1 14 16 14Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(7 2)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 2L0 1.93C0 1.56 0.19 1.21 0.5 1C0.81 0.79 1 0.44 1 0.07L1 0M4 2L4 1.93C4 1.56 4.19 1.21 4.5 1C4.81 0.79 5 0.44 5 0.07L5 0M8 2L8 1.93C8 1.56 8.19 1.21 8.5 1C8.81 0.79 9 0.44 9 0.07L9 0"/>
  <path transform="translate(4 8)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 3.2C0 2.08 0 1.52 0.22 1.09C0.41 0.72 0.72 0.41 1.09 0.22C1.52 0 2.08 0 3.2 0L10.8 0C11.92 0 12.48 0 12.91 0.22C13.28 0.41 13.59 0.72 13.78 1.09C13.9 1.33 13.96 1.61 13.98 2C14 2.31 14 2.7 14 3.2L14 6C14 6.93 14 7.39 13.95 7.78C13.94 7.86 13.93 7.93 13.92 8C13.48 10.59 11.4 12.6 8.78 12.95C8.39 13 7.93 13 7 13C6.07 13 5.61 13 5.22 12.95C2.52 12.59 0.41 10.48 0.05 7.78C0 7.39 0 6.93 0 6L0 3.2Z"/>
  <path transform="translate(4 8)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M13.92 8L15 8C16.66 8 18 6.66 18 5C18 3.34 16.66 2 15 2L13.98 2"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(6 1)" fill="currentColor" d="M3 1C3 0.45 2.55 0 2 0C1.45 0 1 0.45 1 1L1 1.07C1 1.11 0.98 1.15 0.95 1.17C0.35 1.56 0 2.22 0 2.93L0 3C0 3.55 0.45 4 1 4C1.55 4 2 3.55 2 3L2 2.93C2 2.89 2.02 2.85 2.05 2.83C2.65 2.44 3 1.78 3 1.07L3 1Z"/>
  <path opacity="0.28" transform="translate(6 1)" fill="currentColor" d="M7 1C7 0.45 6.55 0 6 0C5.45 0 5 0.45 5 1L5 1.07C5 1.11 4.98 1.15 4.95 1.17C4.35 1.56 4 2.22 4 2.93L4 3C4 3.55 4.45 4 5 4C5.55 4 6 3.55 6 3L6 2.93C6 2.89 6.02 2.85 6.05 2.83C6.65 2.44 7 1.78 7 1.07L7 1Z"/>
  <path opacity="0.28" transform="translate(6 1)" fill="currentColor" d="M10 0C10.55 0 11 0.45 11 1L11 1.07C11 1.78 10.65 2.44 10.05 2.83C10.02 2.85 10 2.89 10 2.93L10 3C10 3.55 9.55 4 9 4C8.45 4 8 3.55 8 3L8 2.93C8 2.22 8.35 1.56 8.95 1.17C8.98 1.15 9 1.11 9 1.07L9 1C9 0.45 9.45 0 10 0Z"/>
  <path opacity="0.28" transform="translate(6 1)" fill="currentColor" d="M11.98 8C11.43 8 10.98 8.45 10.98 9C10.98 9.55 11.43 10 11.98 10L13 10C14.1 10 15 10.9 15 12C15 13.1 14.1 14 13 14L11.92 14C11.36 14 10.92 14.45 10.92 15C10.92 15.55 11.36 16 11.92 16L13 16C15.21 16 17 14.21 17 12C17 9.79 15.21 8 13 8L11.98 8Z"/>
  <path transform="translate(3 7)" fill="currentColor" d="M4.16 0C3.63 0 3.18 0 2.8 0.03C2.41 0.06 2.02 0.13 1.64 0.33C1.07 0.61 0.61 1.07 0.33 1.64C0.13 2.02 0.06 2.41 0.03 2.8C0 3.18 0 3.63 0 4.16L0 7.09C0 7.93 0 8.46 0.06 8.91C0.47 12.05 2.95 14.53 6.09 14.94C6.54 15 7.07 15 7.91 15L8.09 15C8.93 15 9.46 15 9.91 14.94C13.05 14.53 15.53 12.05 15.94 8.91C16 8.46 16 7.93 16 7.09L16 4.16C16 3.63 16 3.18 15.97 2.8C15.94 2.41 15.87 2.02 15.67 1.64C15.39 1.07 14.93 0.61 14.36 0.33C13.98 0.13 13.59 0.06 13.2 0.03C12.82 0 12.37 0 11.84 0L4.16 0Z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path opacity="0.28" transform="translate(4 8)" fill="currentColor" d="M0 3.2C0 2.08 0 1.52 0.22 1.09C0.41 0.72 0.72 0.41 1.09 0.22C1.52 0 2.08 0 3.2 0L10.8 0C11.92 0 12.48 0 12.91 0.22C13.28 0.41 13.59 0.72 13.78 1.09C13.9 1.33 13.96 1.61 13.98 2C14 2.31 14 2.7 14 3.2L14 6C14 6.93 14 7.39 13.95 7.78C13.94 7.86 13.93 7.93 13.92 8C13.48 10.59 11.4 12.6 8.78 12.95C8.39 13 7.93 13 7 13C6.07 13 5.61 13 5.22 12.95C2.52 12.59 0.41 10.48 0.05 7.78C0 7.39 0 6.93 0 6L0 3.2Z"/>
  <path transform="translate(4 2)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M0 9.2C0 8.08 0 7.52 0.22 7.09C0.41 6.72 0.72 6.41 1.09 6.22C1.52 6 2.08 6 3.2 6L10.8 6C11.92 6 12.48 6 12.91 6.22C13.28 6.41 13.59 6.72 13.78 7.09C13.9 7.33 13.96 7.61 13.98 8C14 8.31 14 8.7 14 9.2L14 12C14 12.93 14 13.39 13.95 13.78C13.94 13.86 13.93 13.93 13.92 14C13.48 16.59 11.4 18.6 8.78 18.95C8.39 19 7.93 19 7 19C6.07 19 5.61 19 5.22 18.95C2.52 18.59 0.41 16.48 0.05 13.78C0 13.39 0 12.93 0 12L0 9.2Z"/>
  <path transform="translate(4 2)" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3 2L3 1.93C3 1.56 3.19 1.21 3.5 1C3.81 0.79 4 0.44 4 0.07L4 0M7 2L7 1.93C7 1.56 7.19 1.21 7.5 1C7.81 0.79 8 0.44 8 0.07L8 0M11 2L11 1.93C11 1.56 11.19 1.21 11.5 1C11.81 0.79 12 0.44 12 0.07L12 0M13.92 14L15 14C16.66 14 18 12.66 18 11C18 9.34 16.66 8 15 8L13.98 8"/>
</svg>

More Food & Drink icons

In the full library

Bottle Milk
Bottle Milk Glass
Burger
Cake
Carton
Chef Hat
Chocolate Bar
Coffee Cup 02
Cookie
Egg Boiled
Egg Broken
Egg
Food Menu Book
Fork Knife
Martini Glass
Wine Glass Broken
Wine Glass Empty
Wine Glass Filled

See all Food & Drink icons

Get the full library

5,000+ icons across five styles, with the Figma file and the Pikaicons app, for one payment from $99. 500+ of them are free to copy here.

Get Pikaicons Browse free icons