Video 360 icon

Use the Video 360 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 { Video36024Regular, Video36024Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M13.5 11.4997C13.5 12.3281 12.8284 12.9997 12 12.9997C11.1716 12.9997 10.5 12.3281 10.5 11.4997C10.5 10.6713 11.1716 9.99969 12 9.99969C12.8284 9.99969 13.5 10.6713 13.5 11.4997ZM7 13.9996C7.82843 13.9996 8.5 13.3281 8.5 12.4996C8.5 11.6712 7.82843 10.9996 7 10.9996C6.17157 10.9996 5.5 11.6712 5.5 12.4996C5.5 13.3281 6.17157 13.9996 7 13.9996ZM17 13.9996C17.8284 13.9996 18.5 13.3281 18.5 12.4996C18.5 11.6712 17.8284 10.9996 17 10.9996C16.1716 10.9996 15.5 11.6712 15.5 12.4996C15.5 13.3281 16.1716 13.9996 17 13.9996ZM2 6.3157C1.99999 4.87485 3.31849 3.82436 4.69176 4.01693C6.2677 4.23792 8.80859 4.49973 12.0001 4.49973C15.1915 4.49973 17.7324 4.23792 19.3083 4.01693C20.6816 3.82436 22.0001 4.87484 22.0001 6.3157V17.6845C22.0001 19.125 20.6822 20.1754 19.3091 19.9829C17.732 19.7618 15.1894 19.4997 12.0001 19.4997C8.81075 19.4997 6.2681 19.7618 4.69106 19.9829C3.31791 20.1754 2.00006 19.125 2.00005 17.6845L2 6.3157ZM4.48346 5.50239C3.95859 5.42879 3.5 5.83983 3.5 6.31569L3.50005 17.6845C3.50005 18.1602 3.95831 18.5709 4.48281 18.4974C4.64559 18.4746 4.8181 18.4514 5 18.4281V15.9996C5 15.4473 5.44772 14.9996 6 14.9996H8.5V18.1036C8.97657 18.075 9.47734 18.0511 10.0006 18.0334C10.0002 18.0222 10 18.011 10 17.9997V14.9997C10 14.4474 10.4477 13.9997 11 13.9997H13C13.5523 13.9997 14 14.4474 14 14.9997V17.9997C14 18.011 13.9998 18.0222 13.9994 18.0334C14.5227 18.051 15.0234 18.075 15.5 18.1036V14.9996H18C18.5523 14.9996 19 15.4473 19 15.9996V18.4281C19.1819 18.4514 19.3545 18.4746 19.5173 18.4974C20.0418 18.5709 20.5001 18.1602 20.5001 17.6845V6.3157C20.5001 5.83983 20.0415 5.4288 19.5166 5.5024C17.8837 5.73138 15.2723 5.99973 12.0001 5.99973C8.72777 5.99973 6.11642 5.73138 4.48346 5.50239Z" 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_360_24_regular.svg";

Details

Keywords

videomeetingselfiecameraclipmediafrontfacingeffectscallchatvr