Gentleface › Photo & image › background-replace

background-replace icon

Background replace: virtual background, background effects, replace background, change background. 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="M1.14 4.264C1.242 4.007 1.391 3.781 1.586 3.586C1.781 3.391 2.007 3.242 2.264 3.14C2.5 3.047 2.746 3 3 3L13 3C13.254 3 13.5 3.047 13.736 3.14C13.993 3.242 14.219 3.391 14.414 3.586C14.609 3.781 14.758 4.007 14.86 4.264C14.953 4.5 15 4.746 15 5L15 11C15 11.254 14.953 11.5 14.86 11.736C14.758 11.993 14.609 12.219 14.414 12.414C14.219 12.609 13.993 12.758 13.736 12.86C13.5 12.953 13.254 13 13 13L12.5 13C12.434 13 12.372 12.989 12.316 12.968C12.222 12.839 12.119 12.715 12.008 12.596C12.003 12.565 12 12.533 12 12.5C12 12.359 12.048 12.241 12.144 12.144C12.241 12.048 12.359 12 12.5 12L13 12C13.276 12 13.512 11.902 13.707 11.707C13.902 11.512 14 11.276 14 11L14 5C14 4.724 13.902 4.488 13.707 4.293C13.512 4.098 13.276 4 13 4L3 4C2.724 4 2.488 4.098 2.293 4.293C2.098 4.488 2 4.724 2 5L2 9.293L3.086 8.207C3.263 8.03 3.466 7.891 3.696 7.79C3.925 7.689 4.165 7.634 4.415 7.623C4.553 7.617 4.673 7.661 4.775 7.754C4.876 7.848 4.93 7.964 4.936 8.102C4.942 8.242 4.899 8.363 4.807 8.463C4.715 8.563 4.598 8.616 4.458 8.622C4.198 8.633 3.977 8.731 3.793 8.914L2 10.707L2 11C2 11.276 2.098 11.512 2.293 11.707C2.488 11.902 2.724 12 3 12L3.5 12C3.641 12 3.759 12.048 3.856 12.144C3.952 12.241 4 12.359 4 12.5C4 12.533 3.997 12.565 3.992 12.596C3.881 12.715 3.778 12.839 3.684 12.968C3.628 12.989 3.566 13 3.5 13L3 13C2.746 13 2.5 12.953 2.264 12.86C2.007 12.758 1.781 12.609 1.586 12.414C1.391 12.219 1.242 11.993 1.14 11.736C1.047 11.5 1 11.254 1 11L1 5C1 4.746 1.047 4.5 1.14 4.264ZM11.293 5.293C11.488 5.098 11.724 5 12 5C12.276 5 12.512 5.098 12.707 5.293C12.902 5.488 13 5.724 13 6C13 6.276 12.902 6.512 12.707 6.707C12.512 6.902 12.276 7 12 7C11.724 7 11.488 6.902 11.293 6.707C11.098 6.512 11 6.276 11 6C11 5.724 11.098 5.488 11.293 5.293ZM6.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-replace" (line-round), MIT. https://gentleface.com/icons/background-replace
import type { SVGProps } from 'react';

export function BackgroundReplaceIcon(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="M1.14 4.264C1.242 4.007 1.391 3.781 1.586 3.586C1.781 3.391 2.007 3.242 2.264 3.14C2.5 3.047 2.746 3 3 3L13 3C13.254 3 13.5 3.047 13.736 3.14C13.993 3.242 14.219 3.391 14.414 3.586C14.609 3.781 14.758 4.007 14.86 4.264C14.953 4.5 15 4.746 15 5L15 11C15 11.254 14.953 11.5 14.86 11.736C14.758 11.993 14.609 12.219 14.414 12.414C14.219 12.609 13.993 12.758 13.736 12.86C13.5 12.953 13.254 13 13 13L12.5 13C12.434 13 12.372 12.989 12.316 12.968C12.222 12.839 12.119 12.715 12.008 12.596C12.003 12.565 12 12.533 12 12.5C12 12.359 12.048 12.241 12.144 12.144C12.241 12.048 12.359 12 12.5 12L13 12C13.276 12 13.512 11.902 13.707 11.707C13.902 11.512 14 11.276 14 11L14 5C14 4.724 13.902 4.488 13.707 4.293C13.512 4.098 13.276 4 13 4L3 4C2.724 4 2.488 4.098 2.293 4.293C2.098 4.488 2 4.724 2 5L2 9.293L3.086 8.207C3.263 8.03 3.466 7.891 3.696 7.79C3.925 7.689 4.165 7.634 4.415 7.623C4.553 7.617 4.673 7.661 4.775 7.754C4.876 7.848 4.93 7.964 4.936 8.102C4.942 8.242 4.899 8.363 4.807 8.463C4.715 8.563 4.598 8.616 4.458 8.622C4.198 8.633 3.977 8.731 3.793 8.914L2 10.707L2 11C2 11.276 2.098 11.512 2.293 11.707C2.488 11.902 2.724 12 3 12L3.5 12C3.641 12 3.759 12.048 3.856 12.144C3.952 12.241 4 12.359 4 12.5C4 12.533 3.997 12.565 3.992 12.596C3.881 12.715 3.778 12.839 3.684 12.968C3.628 12.989 3.566 13 3.5 13L3 13C2.746 13 2.5 12.953 2.264 12.86C2.007 12.758 1.781 12.609 1.586 12.414C1.391 12.219 1.242 11.993 1.14 11.736C1.047 11.5 1 11.254 1 11L1 5C1 4.746 1.047 4.5 1.14 4.264ZM11.293 5.293C11.488 5.098 11.724 5 12 5C12.276 5 12.512 5.098 12.707 5.293C12.902 5.488 13 5.724 13 6C13 6.276 12.902 6.512 12.707 6.707C12.512 6.902 12.276 7 12 7C11.724 7 11.488 6.902 11.293 6.707C11.098 6.512 11 6.276 11 6C11 5.724 11.098 5.488 11.293 5.293ZM6.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-replace.md

Svelte

Svelte: see /icons/background-replace.md

HTML img

HTML img: see /icons/background-replace.md

CSS

CSS: see /icons/background-replace.md

Data URL

Data URL: see /icons/background-replace.md

Sprite

Sprite: see /icons/background-replace.md

SwiftUI

SwiftUI: see /icons/background-replace.md

Compose

Compose: see /icons/background-replace.md

Android XML

Android XML: see /icons/background-replace.md

Flutter

Flutter: see /icons/background-replace.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.

With npm: import { BackgroundReplaceIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

virtual background, background effects, replace background, change background, video background

Alternatives

blur: blur the background only (background-blur)
wallpaper: a background image for a screen or a page (background-image)

Also fits

remove background: swap the background for another image, or a virtual background in a call (virtual-background)
background blur: replace the background with an image (virtual-background)
wallpaper: a virtual background in a video call (virtual-background)

Tags

background, replace background, virtual background, background effects, video call, webcam, person, scene, photo, backdrop

Category

Photo & image

Component name

BackgroundReplaceIcon

History

2026-11-06 20 px drawn, 24 px drawn, added, released in 0.4.0

Since

version 0.4.0

More photo & image icons

aperture background-remove background-remove-stripes blur blur-off bolt-auto camera camera-alert camera-arrow-up camera-gear camera-link camera-off camera-pencil camera-plus camera-rotate camera-sparkle · all photo & image icons

For agents

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

background-replace icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More photo & image icons

For agents

background-replace icon