Video Person Clock icon
Used to represent general video meetings, views & settings in video meetings, meeting time, meeting timer. The Video Person Clock icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Video Person Clock 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 { VideoPersonClock24Regular, VideoPersonClock24Filled } from "@fluentui/react-icons";
export function Example() {
return <VideoPersonClock24Regular aria-label="Video Person Clock" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_video_person_clock_24_regular.svg" width="24" height="24" alt="Video Person Clock"> 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="M21.9954 5.25C21.9954 4.00736 20.988 3 19.7454 3H4.25C3.00736 3 2 4.00736 2 5.25V16.7546C2 17.9972 3.00736 19.0046 4.25 19.0046H11.175C11.0609 18.5229 11.0003 18.0205 11 17.504H8.499L8.5 14.75L8.5066 14.6927C8.53251 14.5822 8.63165 14.5 8.75 14.5H11.7322C12.0194 13.949 12.3832 13.4443 12.8096 13H8.75L8.60647 13.0058C7.70711 13.0788 7 13.8318 7 14.75L6.999 17.504L4.25 17.5046C3.83579 17.5046 3.5 17.1688 3.5 16.7546V5.25C3.5 4.83579 3.83579 4.5 4.25 4.5H19.7454C20.1596 4.5 20.4954 4.83579 20.4954 5.25V11.7298C21.0463 12.0164 21.551 12.3795 21.9954 12.8051V5.25ZM15 9.00046C15 7.34361 13.6569 6.00046 12 6.00046C10.3431 6.00046 9 7.34361 9 9.00046C9 10.6573 10.3431 12.0005 12 12.0005C13.6569 12.0005 15 10.6573 15 9.00046ZM10.5 9.00046C10.5 8.17203 11.1716 7.50046 12 7.50046C12.8284 7.50046 13.5 8.17203 13.5 9.00046C13.5 9.82889 12.8284 10.5005 12 10.5005C11.1716 10.5005 10.5 9.82889 10.5 9.00046ZM23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23C20.5376 23 23 20.5376 23 17.5ZM17.5 14C17.7761 14 18 14.2239 18 14.5V17H20C20.2761 17 20.5 17.2239 20.5 17.5C20.5 17.7761 20.2761 18 20 18H17.5C17.2239 18 17 17.7761 17 17.5V14.5C17 14.2239 17.2239 14 17.5 14Z" 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_clock_24_regular.svg";Details
| Name | Video Person Clock |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_video_person_clock_24_regular.svg |
| Filled file | ic_fluent_video_person_clock_24_filled.svg |
| React components | VideoPersonClock24Regular, VideoPersonClock24Filled |
| License | MIT (© Microsoft Corporation) |
Keywords
videomeetingselfiecameraclipmediafrontfacingeffectscallchattimeclocktimer