Fluent Icons

Closed Caption icon

Used for video options. The Closed Caption 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

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_closed_caption_24_regular.svg

Closed Caption icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <ClosedCaption24Regular aria-label="Closed Caption" />;
}

Closed Caption icon in SVG

npm install @fluentui/svg-icons

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

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/closed_caption_24_regular.svg" width="24" height="24" alt="Closed Caption">

Closed Caption icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Closed Caption icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.closed_caption_24_regular)

Closed Caption 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="&#xF2E3;" FontSize="24" />

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

Closed Caption 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_closed_caption_24_regular"></i>

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

Closed Caption icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_closed_caption_24_regular

Closed Caption icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .closedCaption24Regular)

Closed Caption 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 Closed Caption 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 { ClosedCaption24Regular, ClosedCaption24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ClosedCaption24Regular aria-label="Closed Caption" />;
}

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_closed_caption_24_regular.svg" width="24" height="24" alt="Closed Caption">

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="M18.75 4C20.5449 4 22 5.45507 22 7.25V16.7546C22 18.5495 20.5449 20.0046 18.75 20.0046H5.25C3.45507 20.0046 2 18.5495 2 16.7546V7.25C2 5.51697 3.35645 4.10075 5.06558 4.00514L5.25 4H18.75ZM18.75 5.5H5.25L5.10647 5.5058C4.20711 5.57881 3.5 6.33183 3.5 7.25V16.7546C3.5 17.7211 4.2835 18.5046 5.25 18.5046H18.75C19.7165 18.5046 20.5 17.7211 20.5 16.7546V7.25C20.5 6.2835 19.7165 5.5 18.75 5.5ZM5.5 12C5.5 8.85442 8.21322 7.22469 10.6216 8.59854C10.9814 8.80378 11.1067 9.26183 10.9015 9.62162C10.6962 9.98141 10.2382 10.1067 9.87838 9.90146C8.48071 9.10417 7 9.99357 7 12C7 14.0046 8.48411 14.8962 9.8792 14.1027C10.2392 13.8979 10.6971 14.0238 10.9019 14.3838C11.1067 14.7439 10.9808 15.2018 10.6208 15.4066C8.21539 16.7747 5.5 15.1433 5.5 12ZM13 12C13 8.85442 15.7132 7.22469 18.1216 8.59854C18.4814 8.80378 18.6067 9.26183 18.4015 9.62162C18.1962 9.98141 17.7382 10.1067 17.3784 9.90146C15.9807 9.10417 14.5 9.99357 14.5 12C14.5 14.0046 15.9841 14.8962 17.3792 14.1027C17.7392 13.8979 18.1971 14.0238 18.4019 14.3838C18.6067 14.7439 18.4808 15.2018 18.1208 15.4066C15.7154 16.7747 13 15.1433 13 12Z" fill="currentColor"/></svg>

Details

NameClosed Caption
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_closed_caption_24_regular.svg
Filled fileic_fluent_closed_caption_24_filled.svg
React (Regular)ClosedCaption16Regular, ClosedCaption20Regular, ClosedCaption24Regular, ClosedCaption28Regular, ClosedCaption32Regular, ClosedCaption48Regular
React (Filled)ClosedCaption16Filled, ClosedCaption20Filled, ClosedCaption24Filled, ClosedCaption28Filled, ClosedCaption32Filled, ClosedCaption48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

textvideo

Related icons

Closed Caption OffBranch Request ClosedDual Screen Closed AlertLock ClosedLock Closed KeyLock Closed RibbonComment QuoteComment TextArrow Collapse AllArrow Expand AllArrow JoinArrow Sort Down Lines