Video Settings icon

Use the Video Settings 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 { VideoSettings24Regular, VideoSettings24Filled } from "@fluentui/react-icons";

export function Example() {
  return <VideoSettings24Regular aria-label="Video Settings" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_video_settings_24_regular.svg" width="24" height="24" alt="Video Settings">

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="M5.25 4C3.45507 4 2 5.45507 2 7.25V12.8096C2.44427 12.3832 2.94898 12.0194 3.5 11.7322V7.25C3.5 6.2835 4.2835 5.5 5.25 5.5H12.75C13.7165 5.5 14.5 6.2835 14.5 7.25V14.75C14.5 15.6584 13.8079 16.4051 12.9223 16.4916C12.9734 16.8203 13 17.157 13 17.5C13 17.6655 12.9938 17.8295 12.9817 17.9919C14.6685 17.8731 16 16.467 16 14.75V14.438L19.2575 16.6872C20.4183 17.4887 22.0018 16.6578 22.0018 15.2471V6.75204C22.0018 5.34137 20.4183 4.51044 19.2575 5.31197L16 7.56118V7.25C16 5.45507 14.5449 4 12.75 4H5.25ZM16 9.38401L20.1098 6.54632C20.2756 6.43181 20.5018 6.55051 20.5018 6.75204V15.2471C20.5018 15.4486 20.2756 15.5673 20.1098 15.4528L16 12.6151V9.38401ZM3.27821 13.9756L3.0801 13.2894C3.51938 12.9071 4.01935 12.5969 4.56291 12.3767L5.06169 12.9016C5.84997 13.7311 7.17224 13.7313 7.9608 12.9021L8.45391 12.3835C8.99848 12.6064 9.49897 12.9196 9.93811 13.3053L9.75194 13.9362C9.42808 15.0337 10.0894 16.1787 11.2019 16.4466L11.7409 16.5764C11.7899 16.8767 11.8155 17.1853 11.8155 17.5001C11.8155 17.8009 11.7922 18.0961 11.7472 18.3838L11.1635 18.5282C10.062 18.8007 9.40757 19.9342 9.72233 21.0244L9.92036 21.7103C9.48109 22.0928 8.98112 22.403 8.43755 22.6232L7.93885 22.0985C7.15057 21.2689 5.8283 21.2687 5.03974 22.098L4.54645 22.6167C4.00192 22.3939 3.50145 22.0808 3.06232 21.6951L3.2486 21.0639C3.57246 19.9663 2.91113 18.8213 1.79862 18.5534L1.25916 18.4235C1.21011 18.1232 1.18457 17.8147 1.18457 17.5001C1.18457 17.1992 1.20791 16.9041 1.25282 16.6164L1.83701 16.4718C2.93858 16.1993 3.59297 15.0659 3.27821 13.9756ZM6.50003 19.0001C7.30067 19.0001 7.94971 18.3285 7.94971 17.5001C7.94971 16.6716 7.30067 16.0001 6.50003 16.0001C5.6994 16.0001 5.05036 16.6716 5.05036 17.5001C5.05036 18.3285 5.6994 19.0001 6.50003 19.0001Z" 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/video_settings_24_regular.svg";

Details