Fluent Icons

Video Background Effect Horizontal icon

Used in video meeting scenarios around background blurring. The Video Background Effect Horizontal icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 6 sizes from 16 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_video_background_effect_horizontal_24_regular.svg

Video Background Effect Horizontal icon in React

npm install @fluentui/react-icons

import { VideoBackgroundEffectHorizontal24Regular } from "@fluentui/react-icons";

export function Example() {
  return <VideoBackgroundEffectHorizontal24Regular aria-label="Video Background Effect Horizontal" />;
}

Video Background Effect Horizontal icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/video_background_effect_horizontal_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/video_background_effect_horizontal_24_regular.svg" width="24" height="24" alt="Video Background Effect Horizontal">

Video Background Effect Horizontal icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.VideoBackgroundEffectHorizontal())" />

Video Background Effect Horizontal icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.video_background_effect_horizontal_24_regular)

Video Background Effect Horizontal icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF00C6;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF00C6;" FontSize="24" />

Video Background Effect Horizontal icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_video_background_effect_horizontal_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f00c6";
  font-size: 24px;
}

Video Background Effect Horizontal icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_video_background_effect_horizontal_24_regular" />

// Kotlin
R.drawable.ic_fluent_video_background_effect_horizontal_24_regular

Video Background Effect Horizontal icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .videoBackgroundEffectHorizontal24Regular)

Video Background Effect Horizontal icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Video Background Effect Horizontal icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS. 

npm install @fluentui/react-icons

import { VideoBackgroundEffectHorizontal24Regular, VideoBackgroundEffectHorizontal24Filled } from "@fluentui/react-icons";

export function Example() {
  return <VideoBackgroundEffectHorizontal24Regular aria-label="Video Background Effect Horizontal" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_video_background_effect_horizontal_24_regular.svg" width="24" height="24" alt="Video Background Effect Horizontal">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent: 

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.12793 5.5C2.43681 4.62611 3.27024 4 4.2499 4H19.7499C20.7296 4 21.563 4.62611 21.8719 5.5H2.12793ZM22 11.25H15.8008C15.6146 11.8164 15.3054 12.3269 14.9047 12.75H22V11.25ZM22 9H15.874C15.7309 8.44402 15.4713 7.93483 15.1227 7.5H22V9ZM14.8293 9C14.6108 8.38195 14.1956 7.85686 13.6589 7.5C13.1837 7.18408 12.6134 7 12 7C11.3866 7 10.8163 7.18408 10.3411 7.5C9.80438 7.85686 9.38915 8.38195 9.17071 9C9.06015 9.31278 9 9.64936 9 10C9 10.4461 9.09737 10.8695 9.27202 11.25C9.57886 11.9185 10.1242 12.4549 10.7991 12.75C11.1668 12.9108 11.573 13 12 13C12.427 13 12.8332 12.9108 13.2009 12.75C13.8758 12.4549 14.4211 11.9185 14.728 11.25C14.9026 10.8695 15 10.4461 15 10C15 9.64936 14.9398 9.31278 14.8293 9ZM10.5 10C10.5 9.17157 11.1716 8.5 12 8.5C12.8284 8.5 13.5 9.17157 13.5 10C13.5 10.8284 12.8284 11.5 12 11.5C11.1716 11.5 10.5 10.8284 10.5 10ZM2 7.5H8.87731C8.52874 7.93483 8.26912 8.44402 8.12602 9H2V7.5ZM2 11.25H8.19919C8.38535 11.8164 8.69458 12.3269 9.09525 12.75H2V11.25ZM2 15H6.10352C6.03608 15.2384 6 15.49 6 15.75V16.5H2V15ZM2.12793 18.5H6V20H4.2499C3.27024 20 2.43681 19.3739 2.12793 18.5ZM7 15.75C7 15.4816 7.06042 15.2273 7.16841 15C7.44927 14.4088 8.0519 14 8.75 14H15.25C15.9481 14 16.5507 14.4088 16.8316 15C16.9396 15.2273 17 15.4816 17 15.75V20H15.5V15.75C15.5 15.6119 15.3881 15.5 15.25 15.5H8.75C8.61193 15.5 8.5 15.6119 8.5 15.75V20H7V15.75ZM18 18.5V20H19.7499C20.7296 20 21.563 19.3739 21.8719 18.5H18ZM22 16.5H18V15.75C18 15.49 17.9639 15.2384 17.8965 15H22V16.5Z" fill="currentColor"/></svg>

Details

NameVideo Background Effect Horizontal
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_video_background_effect_horizontal_24_regular.svg
Filled fileic_fluent_video_background_effect_horizontal_24_filled.svg
React (Regular)VideoBackgroundEffectHorizontal16Regular, VideoBackgroundEffectHorizontal20Regular, VideoBackgroundEffectHorizontal24Regular, VideoBackgroundEffectHorizontal28Regular, VideoBackgroundEffectHorizontal32Regular, VideoBackgroundEffectHorizontal48Regular
React (Filled)VideoBackgroundEffectHorizontal16Filled, VideoBackgroundEffectHorizontal20Filled, VideoBackgroundEffectHorizontal24Filled, VideoBackgroundEffectHorizontal28Filled, VideoBackgroundEffectHorizontal32Filled, VideoBackgroundEffectHorizontal48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

videomeetingselfiecameraclipmediafront facingeffectscallchataiimage

Related icons

Video Background EffectRectangle Landscape SparkleVideo Person SparkleVideo Person Sparkle OffVideo 360Video 360 OffVideo PeopleVideo PersonVideo Person CallVideo Person ClockVideo Person OffVideo Person Pulse