Gentleface › Home & household › detergent

detergent icon

Detergent: laundry detergent, washing liquid. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M12.778 8.385C12.926 8.742 13 9.114 13 9.5L13 13C13 13.254 12.953 13.5 12.86 13.736C12.758 13.993 12.609 14.219 12.414 14.414C12.219 14.609 11.993 14.758 11.736 14.86C11.5 14.953 11.254 15 11 15L4 15C3.746 15 3.5 14.953 3.264 14.86C3.007 14.758 2.781 14.609 2.586 14.414C2.391 14.219 2.242 13.993 2.14 13.736C2.047 13.5 2 13.254 2 13L2 7C2 6.504 2.168 6.074 2.504 5.711C2.625 5.58 2.774 5.451 2.952 5.325C3.05 5.256 3.196 5.162 3.39 5.043C3.648 4.885 3.816 4.768 3.894 4.692C3.965 4.624 4 4.56 4 4.5C4 4.359 4.048 4.241 4.144 4.144C4.241 4.048 4.359 4 4.5 4L5 4L5 1.5C5 1.359 5.048 1.241 5.144 1.144C5.241 1.048 5.359 1 5.5 1L7.5 1C7.641 1 7.759 1.048 7.856 1.144C7.952 1.241 8 1.359 8 1.5L8 4.043C8.21 4.079 8.415 4.139 8.615 4.222C8.972 4.37 9.287 4.58 9.561 4.854L12.146 7.439C12.42 7.713 12.63 8.028 12.778 8.385ZM6 2L6 4L7 4L7 2L6 2ZM4.591 5.41C4.46 5.537 4.234 5.699 3.912 5.896C3.738 6.003 3.61 6.084 3.53 6.141C3.41 6.227 3.312 6.31 3.238 6.389C3.079 6.561 3 6.765 3 7L3 13C3 13.276 3.098 13.512 3.293 13.707C3.488 13.902 3.724 14 4 14L11 14C11.276 14 11.512 13.902 11.707 13.707C11.902 13.512 12 13.276 12 13L12 9.5C12 9.246 11.951 9.002 11.854 8.767C11.757 8.533 11.619 8.326 11.439 8.146L8.854 5.561C8.674 5.381 8.467 5.243 8.233 5.146C7.998 5.049 7.754 5 7.5 5L4.89 5C4.822 5.145 4.722 5.282 4.591 5.41ZM7.985 6.677C8.257 6.585 8.544 6.577 8.845 6.654C9.14 6.728 9.425 6.879 9.701 7.106C9.959 7.317 10.191 7.581 10.399 7.897C10.585 8.182 10.739 8.49 10.86 8.823C10.981 9.156 11.062 9.491 11.102 9.829C11.146 10.204 11.138 10.556 11.076 10.884C11.01 11.235 10.889 11.533 10.711 11.78C10.529 12.032 10.305 12.21 10.037 12.315C10.034 12.316 10.03 12.317 10.027 12.318L10.025 12.319C10.022 12.32 10.018 12.322 10.015 12.323C9.743 12.415 9.456 12.423 9.155 12.346C8.86 12.272 8.575 12.121 8.299 11.894C8.041 11.683 7.809 11.419 7.601 11.103C7.415 10.818 7.261 10.51 7.14 10.177C7.019 9.844 6.938 9.509 6.898 9.171C6.854 8.796 6.862 8.444 6.924 8.116C6.99 7.765 7.111 7.467 7.289 7.22C7.471 6.968 7.695 6.79 7.963 6.685C7.966 6.684 7.97 6.683 7.973 6.682L7.975 6.681C7.978 6.68 7.981 6.678 7.985 6.677ZM7.907 8.301C7.864 8.529 7.859 8.78 7.891 9.054C7.922 9.315 7.985 9.575 8.08 9.835C8.174 10.095 8.294 10.335 8.438 10.555C8.589 10.785 8.754 10.974 8.934 11.122C9.095 11.254 9.251 11.339 9.401 11.377C9.506 11.404 9.601 11.404 9.684 11.379C9.764 11.345 9.836 11.284 9.899 11.196C9.99 11.07 10.055 10.904 10.093 10.699C10.136 10.471 10.141 10.22 10.109 9.946C10.078 9.685 10.015 9.425 9.92 9.165C9.826 8.905 9.706 8.665 9.562 8.445C9.411 8.215 9.246 8.026 9.066 7.879C8.905 7.746 8.749 7.661 8.599 7.623C8.494 7.596 8.399 7.596 8.316 7.621C8.236 7.655 8.164 7.716 8.101 7.804C8.01 7.93 7.945 8.096 7.907 8.301Z"/></svg>

React

// Gentleface "detergent" (line-round), MIT. https://gentleface.com/icons/detergent
import type { SVGProps } from 'react';

export function DetergentIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M12.778 8.385C12.926 8.742 13 9.114 13 9.5L13 13C13 13.254 12.953 13.5 12.86 13.736C12.758 13.993 12.609 14.219 12.414 14.414C12.219 14.609 11.993 14.758 11.736 14.86C11.5 14.953 11.254 15 11 15L4 15C3.746 15 3.5 14.953 3.264 14.86C3.007 14.758 2.781 14.609 2.586 14.414C2.391 14.219 2.242 13.993 2.14 13.736C2.047 13.5 2 13.254 2 13L2 7C2 6.504 2.168 6.074 2.504 5.711C2.625 5.58 2.774 5.451 2.952 5.325C3.05 5.256 3.196 5.162 3.39 5.043C3.648 4.885 3.816 4.768 3.894 4.692C3.965 4.624 4 4.56 4 4.5C4 4.359 4.048 4.241 4.144 4.144C4.241 4.048 4.359 4 4.5 4L5 4L5 1.5C5 1.359 5.048 1.241 5.144 1.144C5.241 1.048 5.359 1 5.5 1L7.5 1C7.641 1 7.759 1.048 7.856 1.144C7.952 1.241 8 1.359 8 1.5L8 4.043C8.21 4.079 8.415 4.139 8.615 4.222C8.972 4.37 9.287 4.58 9.561 4.854L12.146 7.439C12.42 7.713 12.63 8.028 12.778 8.385ZM6 2L6 4L7 4L7 2L6 2ZM4.591 5.41C4.46 5.537 4.234 5.699 3.912 5.896C3.738 6.003 3.61 6.084 3.53 6.141C3.41 6.227 3.312 6.31 3.238 6.389C3.079 6.561 3 6.765 3 7L3 13C3 13.276 3.098 13.512 3.293 13.707C3.488 13.902 3.724 14 4 14L11 14C11.276 14 11.512 13.902 11.707 13.707C11.902 13.512 12 13.276 12 13L12 9.5C12 9.246 11.951 9.002 11.854 8.767C11.757 8.533 11.619 8.326 11.439 8.146L8.854 5.561C8.674 5.381 8.467 5.243 8.233 5.146C7.998 5.049 7.754 5 7.5 5L4.89 5C4.822 5.145 4.722 5.282 4.591 5.41ZM7.985 6.677C8.257 6.585 8.544 6.577 8.845 6.654C9.14 6.728 9.425 6.879 9.701 7.106C9.959 7.317 10.191 7.581 10.399 7.897C10.585 8.182 10.739 8.49 10.86 8.823C10.981 9.156 11.062 9.491 11.102 9.829C11.146 10.204 11.138 10.556 11.076 10.884C11.01 11.235 10.889 11.533 10.711 11.78C10.529 12.032 10.305 12.21 10.037 12.315C10.034 12.316 10.03 12.317 10.027 12.318L10.025 12.319C10.022 12.32 10.018 12.322 10.015 12.323C9.743 12.415 9.456 12.423 9.155 12.346C8.86 12.272 8.575 12.121 8.299 11.894C8.041 11.683 7.809 11.419 7.601 11.103C7.415 10.818 7.261 10.51 7.14 10.177C7.019 9.844 6.938 9.509 6.898 9.171C6.854 8.796 6.862 8.444 6.924 8.116C6.99 7.765 7.111 7.467 7.289 7.22C7.471 6.968 7.695 6.79 7.963 6.685C7.966 6.684 7.97 6.683 7.973 6.682L7.975 6.681C7.978 6.68 7.981 6.678 7.985 6.677ZM7.907 8.301C7.864 8.529 7.859 8.78 7.891 9.054C7.922 9.315 7.985 9.575 8.08 9.835C8.174 10.095 8.294 10.335 8.438 10.555C8.589 10.785 8.754 10.974 8.934 11.122C9.095 11.254 9.251 11.339 9.401 11.377C9.506 11.404 9.601 11.404 9.684 11.379C9.764 11.345 9.836 11.284 9.899 11.196C9.99 11.07 10.055 10.904 10.093 10.699C10.136 10.471 10.141 10.22 10.109 9.946C10.078 9.685 10.015 9.425 9.92 9.165C9.826 8.905 9.706 8.665 9.562 8.445C9.411 8.215 9.246 8.026 9.066 7.879C8.905 7.746 8.749 7.661 8.599 7.623C8.494 7.596 8.399 7.596 8.316 7.621C8.236 7.655 8.164 7.716 8.101 7.804C8.01 7.93 7.945 8.096 7.907 8.301Z" />
    </svg>
  );
}

Vue

Vue: see /icons/detergent.md

Svelte

Svelte: see /icons/detergent.md

HTML img

HTML img: see /icons/detergent.md

CSS

CSS: see /icons/detergent.md

Data URL

Data URL: see /icons/detergent.md

Sprite

Sprite: see /icons/detergent.md

SwiftUI

SwiftUI: see /icons/detergent.md

Compose

Compose: see /icons/detergent.md

Android XML

Android XML: see /icons/detergent.md

Flutter

Flutter: see /icons/detergent.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

laundry detergent, washing liquid

Tags

detergent, laundry, washing-liquid, soap, jug, cleaning, wash

Category

Home & household

Component name

DetergentIcon

History

2026-11-12 16 px redrawn, 20 px drawn, 24 px drawn, added

More home & household icons

air-freshener air-purifier air-vent armchair baby-changing bath bed bed-bunk bed-double bed-off bed-person bed-plus bed-single blanket blender blinds · all home & household icons

For agents

Metadata: /icons/detergent.json · Markdown: /icons/detergent.md · SVG: https://gentleface.com/svg/{style}/16/detergent.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/detergent.png

detergent icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More home & household icons

For agents

detergent icon