Closed Caption Off icon

Use the Closed Caption Off 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 { ClosedCaptionOff24Regular, ClosedCaptionOff24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_closed_caption_off_24_regular.svg" width="24" height="24" alt="Closed Caption Off">

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="M3.28034 2.21967C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98742 2.21966 3.28032L3.4698 4.53047C2.5846 5.11109 2 6.11226 2 7.24997V16.7545C2 18.5494 3.45507 20.0045 5.25 20.0045H18.75C18.8132 20.0045 18.8759 20.0027 18.9382 19.9991L20.7194 21.7803C21.0123 22.0732 21.4872 22.0732 21.7801 21.7803C22.073 21.4874 22.073 21.0126 21.7801 20.7197L3.28034 2.21967ZM17.4436 18.5045H5.25C4.2835 18.5045 3.5 17.721 3.5 16.7545V7.24997C3.5 6.52294 3.94336 5.89945 4.57445 5.63513L7.40186 8.46258C6.29288 9.04205 5.5 10.2995 5.5 11.9999C5.5 15.1432 8.21539 16.7746 10.6208 15.4065C10.9809 15.2017 11.1067 14.7438 10.9019 14.3837C10.6971 14.0237 10.2392 13.8978 9.8792 14.1026C8.48411 14.8961 7 14.0045 7 11.9999C7 10.6301 7.69021 9.7809 8.57296 9.63369L17.4436 18.5045ZM20.4295 17.2477C20.4754 17.0913 20.5 16.9258 20.5 16.7545V7.24997C20.5 6.28348 19.7165 5.49998 18.75 5.49998H8.68192L7.18195 3.99999H18.75C20.5449 3.99999 22 5.45506 22 7.24997V16.7545C22 17.3475 21.8412 17.9034 21.5638 18.382L20.4295 17.2477ZM14.5531 11.3712L13.3557 10.1739C14.1688 8.28645 16.2384 7.52423 18.1216 8.5985C18.4814 8.80374 18.6067 9.26178 18.4015 9.62157C18.1962 9.98136 17.7382 10.1066 17.3784 9.90141C16.1366 9.19303 14.8292 9.81615 14.5531 11.3712Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

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

Details

Keywords

textaccessibilityvideoslash