# detergent icon Detergent. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/detergent - Category: Home & household - Use it for: laundry detergent, washing liquid - Tags: detergent, laundry, washing-liquid, soap, jug, cleaning, wash - Component name: DetergentIcon - Added: 2026-11-12 ## Files 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. - line-round: https://gentleface.com/svg/line-round/16/detergent.svg · PNG https://gentleface.com/png/line-round/16/detergent.png · https://gentleface.com/png/line-round/32/detergent.png · https://gentleface.com/png/line-round/48/detergent.png - line-soft: https://gentleface.com/svg/line-soft/16/detergent.svg · PNG https://gentleface.com/png/line-soft/16/detergent.png · https://gentleface.com/png/line-soft/32/detergent.png · https://gentleface.com/png/line-soft/48/detergent.png - line-sharp: https://gentleface.com/svg/line-sharp/16/detergent.svg · PNG https://gentleface.com/png/line-sharp/16/detergent.png · https://gentleface.com/png/line-sharp/32/detergent.png · https://gentleface.com/png/line-sharp/48/detergent.png - solid-round: https://gentleface.com/svg/solid-round/16/detergent.svg · PNG https://gentleface.com/png/solid-round/16/detergent.png · https://gentleface.com/png/solid-round/32/detergent.png · https://gentleface.com/png/solid-round/48/detergent.png - solid-soft: https://gentleface.com/svg/solid-soft/16/detergent.svg · PNG https://gentleface.com/png/solid-soft/16/detergent.png · https://gentleface.com/png/solid-soft/32/detergent.png · https://gentleface.com/png/solid-soft/48/detergent.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/detergent.svg · PNG https://gentleface.com/png/solid-sharp/16/detergent.png · https://gentleface.com/png/solid-sharp/32/detergent.png · https://gentleface.com/png/solid-sharp/48/detergent.png The SVG of every style: https://gentleface.com/icons/detergent.json (`svg`). ## Code (line-round) 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. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "detergent" (line-round), MIT. https://gentleface.com/icons/detergent import type { SVGProps } from 'react'; export function DetergentIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "detergent" (line-round), MIT. https://gentleface.com/icons/detergent. Takes the text color. */ .icon-detergent { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "detergent" (line-round), MIT. https://gentleface.com/icons/detergent import SwiftUI struct DetergentIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 12.778, y: 8.385)) p.addCurve(to: CGPoint(x: 13, y: 9.5), control1: CGPoint(x: 12.926, y: 8.742), control2: CGPoint(x: 13, y: 9.114)) p.addLine(to: CGPoint(x: 13, y: 13)) p.addCurve(to: CGPoint(x: 12.86, y: 13.736), control1: CGPoint(x: 13, y: 13.254), control2: CGPoint(x: 12.953, y: 13.5)) p.addCurve(to: CGPoint(x: 12.414, y: 14.414), control1: CGPoint(x: 12.758, y: 13.993), control2: CGPoint(x: 12.609, y: 14.219)) p.addCurve(to: CGPoint(x: 11.736, y: 14.86), control1: CGPoint(x: 12.219, y: 14.609), control2: CGPoint(x: 11.993, y: 14.758)) p.addCurve(to: CGPoint(x: 11, y: 15), control1: CGPoint(x: 11.5, y: 14.953), control2: CGPoint(x: 11.254, y: 15)) p.addLine(to: CGPoint(x: 4, y: 15)) p.addCurve(to: CGPoint(x: 3.264, y: 14.86), control1: CGPoint(x: 3.746, y: 15), control2: CGPoint(x: 3.5, y: 14.953)) p.addCurve(to: CGPoint(x: 2.586, y: 14.414), control1: CGPoint(x: 3.007, y: 14.758), control2: CGPoint(x: 2.781, y: 14.609)) p.addCurve(to: CGPoint(x: 2.14, y: 13.736), control1: CGPoint(x: 2.391, y: 14.219), control2: CGPoint(x: 2.242, y: 13.993)) p.addCurve(to: CGPoint(x: 2, y: 13), control1: CGPoint(x: 2.047, y: 13.5), control2: CGPoint(x: 2, y: 13.254)) p.addLine(to: CGPoint(x: 2, y: 7)) p.addCurve(to: CGPoint(x: 2.504, y: 5.711), control1: CGPoint(x: 2, y: 6.504), control2: CGPoint(x: 2.168, y: 6.074)) p.addCurve(to: CGPoint(x: 2.952, y: 5.325), control1: CGPoint(x: 2.625, y: 5.58), control2: CGPoint(x: 2.774, y: 5.451)) p.addCurve(to: CGPoint(x: 3.39, y: 5.043), control1: CGPoint(x: 3.05, y: 5.256), control2: CGPoint(x: 3.196, y: 5.162)) p.addCurve(to: CGPoint(x: 3.894, y: 4.692), control1: CGPoint(x: 3.648, y: 4.885), control2: CGPoint(x: 3.816, y: 4.768)) p.addCurve(to: CGPoint(x: 4, y: 4.5), control1: CGPoint(x: 3.965, y: 4.624), control2: CGPoint(x: 4, y: 4.56)) p.addCurve(to: CGPoint(x: 4.144, y: 4.144), control1: CGPoint(x: 4, y: 4.359), control2: CGPoint(x: 4.048, y: 4.241)) p.addCurve(to: CGPoint(x: 4.5, y: 4), control1: CGPoint(x: 4.241, y: 4.048), control2: CGPoint(x: 4.359, y: 4)) p.addLine(to: CGPoint(x: 5, y: 4)) p.addLine(to: CGPoint(x: 5, y: 1.5)) p.addCurve(to: CGPoint(x: 5.144, y: 1.144), control1: CGPoint(x: 5, y: 1.359), control2: CGPoint(x: 5.048, y: 1.241)) p.addCurve(to: CGPoint(x: 5.5, y: 1), control1: CGPoint(x: 5.241, y: 1.048), control2: CGPoint(x: 5.359, y: 1)) p.addLine(to: CGPoint(x: 7.5, y: 1)) p.addCurve(to: CGPoint(x: 7.856, y: 1.144), control1: CGPoint(x: 7.641, y: 1), control2: CGPoint(x: 7.759, y: 1.048)) p.addCurve(to: CGPoint(x: 8, y: 1.5), control1: CGPoint(x: 7.952, y: 1.241), control2: CGPoint(x: 8, y: 1.359)) p.addLine(to: CGPoint(x: 8, y: 4.043)) p.addCurve(to: CGPoint(x: 8.615, y: 4.222), control1: CGPoint(x: 8.21, y: 4.079), control2: CGPoint(x: 8.415, y: 4.139)) p.addCurve(to: CGPoint(x: 9.561, y: 4.854), control1: CGPoint(x: 8.972, y: 4.37), control2: CGPoint(x: 9.287, y: 4.58)) p.addLine(to: CGPoint(x: 12.146, y: 7.439)) p.addCurve(to: CGPoint(x: 12.778, y: 8.385), control1: CGPoint(x: 12.42, y: 7.713), control2: CGPoint(x: 12.63, y: 8.028)) p.closeSubpath() p.move(to: CGPoint(x: 6, y: 2)) p.addLine(to: CGPoint(x: 6, y: 4)) p.addLine(to: CGPoint(x: 7, y: 4)) p.addLine(to: CGPoint(x: 7, y: 2)) p.addLine(to: CGPoint(x: 6, y: 2)) p.closeSubpath() p.move(to: CGPoint(x: 4.591, y: 5.41)) p.addCurve(to: CGPoint(x: 3.912, y: 5.896), control1: CGPoint(x: 4.46, y: 5.537), control2: CGPoint(x: 4.234, y: 5.699)) p.addCurve(to: CGPoint(x: 3.53, y: 6.141), control1: CGPoint(x: 3.738, y: 6.003), control2: CGPoint(x: 3.61, y: 6.084)) p.addCurve(to: CGPoint(x: 3.238, y: 6.389), control1: CGPoint(x: 3.41, y: 6.227), control2: CGPoint(x: 3.312, y: 6.31)) p.addCurve(to: CGPoint(x: 3, y: 7), control1: CGPoint(x: 3.079, y: 6.561), control2: CGPoint(x: 3, y: 6.765)) p.addLine(to: CGPoint(x: 3, y: 13)) p.addCurve(to: CGPoint(x: 3.293, y: 13.707), control1: CGPoint(x: 3, y: 13.276), control2: CGPoint(x: 3.098, y: 13.512)) p.addCurve(to: CGPoint(x: 4, y: 14), control1: CGPoint(x: 3.488, y: 13.902), control2: CGPoint(x: 3.724, y: 14)) p.addLine(to: CGPoint(x: 11, y: 14)) p.addCurve(to: CGPoint(x: 11.707, y: 13.707), control1: CGPoint(x: 11.276, y: 14), control2: CGPoint(x: 11.512, y: 13.902)) p.addCurve(to: CGPoint(x: 12, y: 13), control1: CGPoint(x: 11.902, y: 13.512), control2: CGPoint(x: 12, y: 13.276)) p.addLine(to: CGPoint(x: 12, y: 9.5)) p.addCurve(to: CGPoint(x: 11.854, y: 8.767), control1: CGPoint(x: 12, y: 9.246), control2: CGPoint(x: 11.951, y: 9.002)) p.addCurve(to: CGPoint(x: 11.439, y: 8.146), control1: CGPoint(x: 11.757, y: 8.533), control2: CGPoint(x: 11.619, y: 8.326)) p.addLine(to: CGPoint(x: 8.854, y: 5.561)) p.addCurve(to: CGPoint(x: 8.233, y: 5.146), control1: CGPoint(x: 8.674, y: 5.381), control2: CGPoint(x: 8.467, y: 5.243)) p.addCurve(to: CGPoint(x: 7.5, y: 5), control1: CGPoint(x: 7.998, y: 5.049), control2: CGPoint(x: 7.754, y: 5)) p.addLine(to: CGPoint(x: 4.89, y: 5)) p.addCurve(to: CGPoint(x: 4.591, y: 5.41), control1: CGPoint(x: 4.822, y: 5.145), control2: CGPoint(x: 4.722, y: 5.282)) p.closeSubpath() p.move(to: CGPoint(x: 7.985, y: 6.677)) p.addCurve(to: CGPoint(x: 8.845, y: 6.654), control1: CGPoint(x: 8.257, y: 6.585), control2: CGPoint(x: 8.544, y: 6.577)) p.addCurve(to: CGPoint(x: 9.701, y: 7.106), control1: CGPoint(x: 9.14, y: 6.728), control2: CGPoint(x: 9.425, y: 6.879)) p.addCurve(to: CGPoint(x: 10.399, y: 7.897), control1: CGPoint(x: 9.959, y: 7.317), control2: CGPoint(x: 10.191, y: 7.581)) p.addCurve(to: CGPoint(x: 10.86, y: 8.823), control1: CGPoint(x: 10.585, y: 8.182), control2: CGPoint(x: 10.739, y: 8.49)) p.addCurve(to: CGPoint(x: 11.102, y: 9.829), control1: CGPoint(x: 10.981, y: 9.156), control2: CGPoint(x: 11.062, y: 9.491)) p.addCurve(to: CGPoint(x: 11.076, y: 10.884), control1: CGPoint(x: 11.146, y: 10.204), control2: CGPoint(x: 11.138, y: 10.556)) p.addCurve(to: CGPoint(x: 10.711, y: 11.78), control1: CGPoint(x: 11.01, y: 11.235), control2: CGPoint(x: 10.889, y: 11.533)) p.addCurve(to: CGPoint(x: 10.037, y: 12.315), control1: CGPoint(x: 10.529, y: 12.032), control2: CGPoint(x: 10.305, y: 12.21)) p.addCurve(to: CGPoint(x: 10.027, y: 12.318), control1: CGPoint(x: 10.034, y: 12.316), control2: CGPoint(x: 10.03, y: 12.317)) p.addLine(to: CGPoint(x: 10.025, y: 12.319)) p.addCurve(to: CGPoint(x: 10.015, y: 12.323), control1: CGPoint(x: 10.022, y: 12.32), control2: CGPoint(x: 10.018, y: 12.322)) p.addCurve(to: CGPoint(x: 9.155, y: 12.346), control1: CGPoint(x: 9.743, y: 12.415), control2: CGPoint(x: 9.456, y: 12.423)) p.addCurve(to: CGPoint(x: 8.299, y: 11.894), control1: CGPoint(x: 8.86, y: 12.272), control2: CGPoint(x: 8.575, y: 12.121)) p.addCurve(to: CGPoint(x: 7.601, y: 11.103), control1: CGPoint(x: 8.041, y: 11.683), control2: CGPoint(x: 7.809, y: 11.419)) p.addCurve(to: CGPoint(x: 7.14, y: 10.177), control1: CGPoint(x: 7.415, y: 10.818), control2: CGPoint(x: 7.261, y: 10.51)) p.addCurve(to: CGPoint(x: 6.898, y: 9.171), control1: CGPoint(x: 7.019, y: 9.844), control2: CGPoint(x: 6.938, y: 9.509)) p.addCurve(to: CGPoint(x: 6.924, y: 8.116), control1: CGPoint(x: 6.854, y: 8.796), control2: CGPoint(x: 6.862, y: 8.444)) p.addCurve(to: CGPoint(x: 7.289, y: 7.22), control1: CGPoint(x: 6.99, y: 7.765), control2: CGPoint(x: 7.111, y: 7.467)) p.addCurve(to: CGPoint(x: 7.963, y: 6.685), control1: CGPoint(x: 7.471, y: 6.968), control2: CGPoint(x: 7.695, y: 6.79)) p.addCurve(to: CGPoint(x: 7.973, y: 6.682), control1: CGPoint(x: 7.966, y: 6.684), control2: CGPoint(x: 7.97, y: 6.683)) p.addLine(to: CGPoint(x: 7.975, y: 6.681)) p.addCurve(to: CGPoint(x: 7.985, y: 6.677), control1: CGPoint(x: 7.978, y: 6.68), control2: CGPoint(x: 7.981, y: 6.678)) p.closeSubpath() p.move(to: CGPoint(x: 7.907, y: 8.301)) p.addCurve(to: CGPoint(x: 7.891, y: 9.054), control1: CGPoint(x: 7.864, y: 8.529), control2: CGPoint(x: 7.859, y: 8.78)) p.addCurve(to: CGPoint(x: 8.08, y: 9.835), control1: CGPoint(x: 7.922, y: 9.315), control2: CGPoint(x: 7.985, y: 9.575)) p.addCurve(to: CGPoint(x: 8.438, y: 10.555), control1: CGPoint(x: 8.174, y: 10.095), control2: CGPoint(x: 8.294, y: 10.335)) p.addCurve(to: CGPoint(x: 8.934, y: 11.122), control1: CGPoint(x: 8.589, y: 10.785), control2: CGPoint(x: 8.754, y: 10.974)) p.addCurve(to: CGPoint(x: 9.401, y: 11.377), control1: CGPoint(x: 9.095, y: 11.254), control2: CGPoint(x: 9.251, y: 11.339)) p.addCurve(to: CGPoint(x: 9.684, y: 11.379), control1: CGPoint(x: 9.506, y: 11.404), control2: CGPoint(x: 9.601, y: 11.404)) p.addCurve(to: CGPoint(x: 9.899, y: 11.196), control1: CGPoint(x: 9.764, y: 11.345), control2: CGPoint(x: 9.836, y: 11.284)) p.addCurve(to: CGPoint(x: 10.093, y: 10.699), control1: CGPoint(x: 9.99, y: 11.07), control2: CGPoint(x: 10.055, y: 10.904)) p.addCurve(to: CGPoint(x: 10.109, y: 9.946), control1: CGPoint(x: 10.136, y: 10.471), control2: CGPoint(x: 10.141, y: 10.22)) p.addCurve(to: CGPoint(x: 9.92, y: 9.165), control1: CGPoint(x: 10.078, y: 9.685), control2: CGPoint(x: 10.015, y: 9.425)) p.addCurve(to: CGPoint(x: 9.562, y: 8.445), control1: CGPoint(x: 9.826, y: 8.905), control2: CGPoint(x: 9.706, y: 8.665)) p.addCurve(to: CGPoint(x: 9.066, y: 7.879), control1: CGPoint(x: 9.411, y: 8.215), control2: CGPoint(x: 9.246, y: 8.026)) p.addCurve(to: CGPoint(x: 8.599, y: 7.623), control1: CGPoint(x: 8.905, y: 7.746), control2: CGPoint(x: 8.749, y: 7.661)) p.addCurve(to: CGPoint(x: 8.316, y: 7.621), control1: CGPoint(x: 8.494, y: 7.596), control2: CGPoint(x: 8.399, y: 7.596)) p.addCurve(to: CGPoint(x: 8.101, y: 7.804), control1: CGPoint(x: 8.236, y: 7.655), control2: CGPoint(x: 8.164, y: 7.716)) p.addCurve(to: CGPoint(x: 7.907, y: 8.301), control1: CGPoint(x: 8.01, y: 7.93), control2: CGPoint(x: 7.945, y: 8.096)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // DetergentIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "detergent" (line-round), MIT. https://gentleface.com/icons/detergent import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val DetergentIcon: ImageVector by lazy { ImageVector.Builder( name = "detergent", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("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"), fill = SolidColor(Color.Black), ).build() } // Icon(DetergentIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "detergent" (line-round), MIT. https://gentleface.com/icons/detergent import 'package:flutter/widgets.dart'; class DetergentIcon extends StatelessWidget { const DetergentIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _DetergentIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _DetergentIconPainter extends CustomPainter { _DetergentIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(12.778, 8.385) ..cubicTo(12.926, 8.742, 13, 9.114, 13, 9.5) ..lineTo(13, 13) ..cubicTo(13, 13.254, 12.953, 13.5, 12.86, 13.736) ..cubicTo(12.758, 13.993, 12.609, 14.219, 12.414, 14.414) ..cubicTo(12.219, 14.609, 11.993, 14.758, 11.736, 14.86) ..cubicTo(11.5, 14.953, 11.254, 15, 11, 15) ..lineTo(4, 15) ..cubicTo(3.746, 15, 3.5, 14.953, 3.264, 14.86) ..cubicTo(3.007, 14.758, 2.781, 14.609, 2.586, 14.414) ..cubicTo(2.391, 14.219, 2.242, 13.993, 2.14, 13.736) ..cubicTo(2.047, 13.5, 2, 13.254, 2, 13) ..lineTo(2, 7) ..cubicTo(2, 6.504, 2.168, 6.074, 2.504, 5.711) ..cubicTo(2.625, 5.58, 2.774, 5.451, 2.952, 5.325) ..cubicTo(3.05, 5.256, 3.196, 5.162, 3.39, 5.043) ..cubicTo(3.648, 4.885, 3.816, 4.768, 3.894, 4.692) ..cubicTo(3.965, 4.624, 4, 4.56, 4, 4.5) ..cubicTo(4, 4.359, 4.048, 4.241, 4.144, 4.144) ..cubicTo(4.241, 4.048, 4.359, 4, 4.5, 4) ..lineTo(5, 4) ..lineTo(5, 1.5) ..cubicTo(5, 1.359, 5.048, 1.241, 5.144, 1.144) ..cubicTo(5.241, 1.048, 5.359, 1, 5.5, 1) ..lineTo(7.5, 1) ..cubicTo(7.641, 1, 7.759, 1.048, 7.856, 1.144) ..cubicTo(7.952, 1.241, 8, 1.359, 8, 1.5) ..lineTo(8, 4.043) ..cubicTo(8.21, 4.079, 8.415, 4.139, 8.615, 4.222) ..cubicTo(8.972, 4.37, 9.287, 4.58, 9.561, 4.854) ..lineTo(12.146, 7.439) ..cubicTo(12.42, 7.713, 12.63, 8.028, 12.778, 8.385) ..close() ..moveTo(6, 2) ..lineTo(6, 4) ..lineTo(7, 4) ..lineTo(7, 2) ..lineTo(6, 2) ..close() ..moveTo(4.591, 5.41) ..cubicTo(4.46, 5.537, 4.234, 5.699, 3.912, 5.896) ..cubicTo(3.738, 6.003, 3.61, 6.084, 3.53, 6.141) ..cubicTo(3.41, 6.227, 3.312, 6.31, 3.238, 6.389) ..cubicTo(3.079, 6.561, 3, 6.765, 3, 7) ..lineTo(3, 13) ..cubicTo(3, 13.276, 3.098, 13.512, 3.293, 13.707) ..cubicTo(3.488, 13.902, 3.724, 14, 4, 14) ..lineTo(11, 14) ..cubicTo(11.276, 14, 11.512, 13.902, 11.707, 13.707) ..cubicTo(11.902, 13.512, 12, 13.276, 12, 13) ..lineTo(12, 9.5) ..cubicTo(12, 9.246, 11.951, 9.002, 11.854, 8.767) ..cubicTo(11.757, 8.533, 11.619, 8.326, 11.439, 8.146) ..lineTo(8.854, 5.561) ..cubicTo(8.674, 5.381, 8.467, 5.243, 8.233, 5.146) ..cubicTo(7.998, 5.049, 7.754, 5, 7.5, 5) ..lineTo(4.89, 5) ..cubicTo(4.822, 5.145, 4.722, 5.282, 4.591, 5.41) ..close() ..moveTo(7.985, 6.677) ..cubicTo(8.257, 6.585, 8.544, 6.577, 8.845, 6.654) ..cubicTo(9.14, 6.728, 9.425, 6.879, 9.701, 7.106) ..cubicTo(9.959, 7.317, 10.191, 7.581, 10.399, 7.897) ..cubicTo(10.585, 8.182, 10.739, 8.49, 10.86, 8.823) ..cubicTo(10.981, 9.156, 11.062, 9.491, 11.102, 9.829) ..cubicTo(11.146, 10.204, 11.138, 10.556, 11.076, 10.884) ..cubicTo(11.01, 11.235, 10.889, 11.533, 10.711, 11.78) ..cubicTo(10.529, 12.032, 10.305, 12.21, 10.037, 12.315) ..cubicTo(10.034, 12.316, 10.03, 12.317, 10.027, 12.318) ..lineTo(10.025, 12.319) ..cubicTo(10.022, 12.32, 10.018, 12.322, 10.015, 12.323) ..cubicTo(9.743, 12.415, 9.456, 12.423, 9.155, 12.346) ..cubicTo(8.86, 12.272, 8.575, 12.121, 8.299, 11.894) ..cubicTo(8.041, 11.683, 7.809, 11.419, 7.601, 11.103) ..cubicTo(7.415, 10.818, 7.261, 10.51, 7.14, 10.177) ..cubicTo(7.019, 9.844, 6.938, 9.509, 6.898, 9.171) ..cubicTo(6.854, 8.796, 6.862, 8.444, 6.924, 8.116) ..cubicTo(6.99, 7.765, 7.111, 7.467, 7.289, 7.22) ..cubicTo(7.471, 6.968, 7.695, 6.79, 7.963, 6.685) ..cubicTo(7.966, 6.684, 7.97, 6.683, 7.973, 6.682) ..lineTo(7.975, 6.681) ..cubicTo(7.978, 6.68, 7.981, 6.678, 7.985, 6.677) ..close() ..moveTo(7.907, 8.301) ..cubicTo(7.864, 8.529, 7.859, 8.78, 7.891, 9.054) ..cubicTo(7.922, 9.315, 7.985, 9.575, 8.08, 9.835) ..cubicTo(8.174, 10.095, 8.294, 10.335, 8.438, 10.555) ..cubicTo(8.589, 10.785, 8.754, 10.974, 8.934, 11.122) ..cubicTo(9.095, 11.254, 9.251, 11.339, 9.401, 11.377) ..cubicTo(9.506, 11.404, 9.601, 11.404, 9.684, 11.379) ..cubicTo(9.764, 11.345, 9.836, 11.284, 9.899, 11.196) ..cubicTo(9.99, 11.07, 10.055, 10.904, 10.093, 10.699) ..cubicTo(10.136, 10.471, 10.141, 10.22, 10.109, 9.946) ..cubicTo(10.078, 9.685, 10.015, 9.425, 9.92, 9.165) ..cubicTo(9.826, 8.905, 9.706, 8.665, 9.562, 8.445) ..cubicTo(9.411, 8.215, 9.246, 8.026, 9.066, 7.879) ..cubicTo(8.905, 7.746, 8.749, 7.661, 8.599, 7.623) ..cubicTo(8.494, 7.596, 8.399, 7.596, 8.316, 7.621) ..cubicTo(8.236, 7.655, 8.164, 7.716, 8.101, 7.804) ..cubicTo(8.01, 7.93, 7.945, 8.096, 7.907, 8.301) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_DetergentIconPainter old) => old.color != color; } ```