gentleface

Gentleface › Photo & image › background-remove

background-remove icon

Background remove: remove background, background removal, cutout, remove bg. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

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="M4 4L2 4L2 2L4 2L4 4ZM4 6L4 4L6 4L6 5.764C5.959 5.801 5.918 5.839 5.879 5.879C5.839 5.918 5.801 5.959 5.764 6L4 6ZM4 6L4 8L2 8L2 6L4 6ZM12 2L14 2L14 4L12 4L12 6L14 6L14 8L12 8L12 6L10.236 6C10.202 5.962 10.167 5.925 10.131 5.889L10.131 5.888C10.125 5.882 10.119 5.876 10.113 5.87L10.112 5.869C10.075 5.833 10.038 5.798 10 5.764L10 4L12 4L12 2ZM6.586 6.586C6.781 6.391 7.007 6.242 7.264 6.14C7.5 6.047 7.746 6 8 6C8.254 6 8.5 6.047 8.736 6.14C8.993 6.242 9.219 6.391 9.414 6.586C9.609 6.781 9.758 7.007 9.86 7.264C9.953 7.5 10 7.746 10 8C10 8.254 9.953 8.5 9.86 8.736C9.758 8.993 9.609 9.219 9.414 9.414C9.219 9.609 8.993 9.758 8.736 9.86C8.5 9.953 8.254 10 8 10C7.746 10 7.5 9.953 7.264 9.86C7.007 9.758 6.781 9.609 6.586 9.414C6.391 9.219 6.242 8.993 6.14 8.736C6.047 8.5 6 8.254 6 8C6 7.746 6.047 7.5 6.14 7.264C6.242 7.007 6.391 6.781 6.586 6.586ZM6.528 12.211C7.001 12.07 7.491 12 8 12C8.509 12 8.999 12.07 9.472 12.211C9.986 12.363 10.438 12.586 10.828 12.879C11.219 13.172 11.516 13.511 11.719 13.896C11.813 14.073 11.883 14.254 11.93 14.439C11.959 14.555 11.942 14.678 11.88 14.78C11.819 14.883 11.72 14.957 11.604 14.986C11.568 14.995 11.531 15 11.494 15L4.506 15C4.258 15 4.056 14.799 4.056 14.55C4.056 14.513 4.061 14.476 4.07 14.439C4.117 14.254 4.187 14.073 4.281 13.896C4.484 13.511 4.781 13.172 5.172 12.879C5.562 12.586 6.014 12.363 6.528 12.211Z"/></svg>
React
// Gentleface "background-remove" (line-round), MIT. https://gentleface.com/icons/background-remove
import type { SVGProps } from 'react';

export function BackgroundRemoveIcon(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="M4 4L2 4L2 2L4 2L4 4ZM4 6L4 4L6 4L6 5.764C5.959 5.801 5.918 5.839 5.879 5.879C5.839 5.918 5.801 5.959 5.764 6L4 6ZM4 6L4 8L2 8L2 6L4 6ZM12 2L14 2L14 4L12 4L12 6L14 6L14 8L12 8L12 6L10.236 6C10.202 5.962 10.167 5.925 10.131 5.889L10.131 5.888C10.125 5.882 10.119 5.876 10.113 5.87L10.112 5.869C10.075 5.833 10.038 5.798 10 5.764L10 4L12 4L12 2ZM6.586 6.586C6.781 6.391 7.007 6.242 7.264 6.14C7.5 6.047 7.746 6 8 6C8.254 6 8.5 6.047 8.736 6.14C8.993 6.242 9.219 6.391 9.414 6.586C9.609 6.781 9.758 7.007 9.86 7.264C9.953 7.5 10 7.746 10 8C10 8.254 9.953 8.5 9.86 8.736C9.758 8.993 9.609 9.219 9.414 9.414C9.219 9.609 8.993 9.758 8.736 9.86C8.5 9.953 8.254 10 8 10C7.746 10 7.5 9.953 7.264 9.86C7.007 9.758 6.781 9.609 6.586 9.414C6.391 9.219 6.242 8.993 6.14 8.736C6.047 8.5 6 8.254 6 8C6 7.746 6.047 7.5 6.14 7.264C6.242 7.007 6.391 6.781 6.586 6.586ZM6.528 12.211C7.001 12.07 7.491 12 8 12C8.509 12 8.999 12.07 9.472 12.211C9.986 12.363 10.438 12.586 10.828 12.879C11.219 13.172 11.516 13.511 11.719 13.896C11.813 14.073 11.883 14.254 11.93 14.439C11.959 14.555 11.942 14.678 11.88 14.78C11.819 14.883 11.72 14.957 11.604 14.986C11.568 14.995 11.531 15 11.494 15L4.506 15C4.258 15 4.056 14.799 4.056 14.55C4.056 14.513 4.061 14.476 4.07 14.439C4.117 14.254 4.187 14.073 4.281 13.896C4.484 13.511 4.781 13.172 5.172 12.879C5.562 12.586 6.014 12.363 6.528 12.211Z" />
    </svg>
  );
}
Vue
Vue: see /icons/background-remove.md
Svelte
Svelte: see /icons/background-remove.md
HTML img
HTML img: see /icons/background-remove.md
CSS
CSS: see /icons/background-remove.md
Data URL
Data URL: see /icons/background-remove.md
Sprite
Sprite: see /icons/background-remove.md
SwiftUI
SwiftUI: see /icons/background-remove.md
Compose
Compose: see /icons/background-remove.md
Android XML
Android XML: see /icons/background-remove.md
Flutter
Flutter: see /icons/background-remove.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. 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
remove background, background removal, cutout, remove bg, erase background
Alternatives
  • background-replace: swap the background for another image, or a virtual background in a call (virtual-background)
  • blur: blur the background (background-blur)
Don’t confuse with
  • eraser: the eraser rubs out pixels or strokes by hand (erase)
Also fits
  • ai image edit: remove the background (remove-background)
Tags
background, remove, cutout, transparent, person, subject, checkerboard, ai
Category
Photo & image
Component name
BackgroundRemoveIcon
History
  • added

More photo & image icons

aperture blur blur-off camera camera-off camera-plus camera-rotate camera-sparkle camera-x collage focus gif hdr hdr-off image image-alert · all photo & image icons

For agents

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

Feedback