Video Person Star Off icon

Use the Video Person Star 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 { VideoPersonStarOff24Regular, VideoPersonStarOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <VideoPersonStarOff24Regular aria-label="Video Person Star Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_video_person_star_off_24_regular.svg" width="24" height="24" alt="Video Person Star 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.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L3.19924 4.25992C2.48599 4.6373 2 5.3869 2 6.25001V17.7546C2 18.9972 3.00736 20.0046 4.25 20.0046H11.5001C11.3019 19.5303 11.1582 19.0275 11.0771 18.504H8.499L8.5 15.75L8.5066 15.6927C8.53251 15.5822 8.63165 15.5 8.75 15.5H11.3135C11.4858 14.9665 11.7253 14.4632 12.0218 14H8.75L8.60647 14.0058C7.70711 14.0788 7 14.8318 7 15.75L6.999 18.504L4.25 18.5046C3.83579 18.5046 3.5 18.1688 3.5 17.7546V6.25001C3.5 5.83579 3.83579 5.50001 4.25 5.50001H4.4393L9.00061 10.0614C9.03265 11.6698 10.3306 12.9678 11.939 12.9999L13.1166 14.1775C12.4159 15.1005 12 16.2517 12 17.5C12 20.5376 14.4624 23 17.5 23C18.7535 23 19.9091 22.5807 20.8341 21.8746C21.1255 22.069 21.5229 22.0376 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM19.7356 20.7966C19.5498 21.0078 19.2268 21.0844 18.9583 20.881L17.5 19.7766L16.0417 20.881C15.584 21.2276 14.9683 20.7612 15.1431 20.2004L15.7001 18.4134L14.2418 17.3089C13.7842 16.9623 14.0194 16.2077 14.5851 16.2077H15.1468L19.7356 20.7966ZM10.5535 7.37161L11.7103 8.52842C11.804 8.51008 11.9009 8.50047 12 8.50047C12.8284 8.50047 13.5 9.17204 13.5 10.0005C13.5 10.0996 13.4904 10.1965 13.472 10.2902L14.6288 11.447C14.8654 11.0181 15 10.525 15 10.0005C15 8.34361 13.6569 7.00047 12 7.00047C11.4755 7.00047 10.9824 7.13507 10.5535 7.37161ZM15.5409 12.3591L17.2421 14.0603C17.5357 13.9139 17.9349 14.034 18.0554 14.4206L18.2605 15.0788L19.3894 16.2077H20.4149C20.9806 16.2077 21.2158 16.9623 20.7582 17.3089L20.6059 17.4242L22.6408 19.4592C22.8729 18.8506 23 18.1901 23 17.5C23 14.4624 20.5376 12 17.5 12C16.8099 12 16.1495 12.1271 15.5409 12.3591ZM7.18195 4.00001L8.68192 5.50001H19.7454C20.1596 5.50001 20.4954 5.83579 20.4954 6.25001V11.7298C21.0463 12.0164 21.551 12.3795 21.9954 12.8051V6.25001C21.9954 5.00737 20.988 4.00001 19.7454 4.00001H7.18195Z" 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_person_star_off_24_regular.svg";

Details

Keywords

videomeetingselfiecameraclipmediafrontfacingeffectscallchat