Video Link icon

Use the Video Link 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 { VideoLink24Regular, VideoLink24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M6.25 4C4.45507 4 3 5.45507 3 7.25V14.3328C3.46808 14.1472 3.97266 14.0338 4.5 14.0065V7.25C4.5 6.2835 5.2835 5.5 6.25 5.5H13.75C14.7165 5.5 15.5 6.2835 15.5 7.25V14.75C15.5 15.7165 14.7165 16.5 13.75 16.5H12.4343C12.6821 16.9598 12.8563 17.465 12.9411 18H13.75C15.5449 18 17 16.5449 17 14.75V14.438L20.2575 16.6872C21.4183 17.4887 23.0018 16.6578 23.0018 15.2471V6.75204C23.0018 5.34137 21.4183 4.51044 20.2575 5.31197L17 7.56118V7.25C17 5.45507 15.5449 4 13.75 4H6.25ZM17 9.38401L21.1098 6.54632C21.2756 6.43181 21.5018 6.55052 21.5018 6.75204V15.2471C21.5018 15.4486 21.2756 15.5673 21.1098 15.4528L17 12.6151V9.38401ZM12 18.75C12 16.6789 10.3211 15 8.25 15L8.14823 15.0068C7.78215 15.0565 7.49997 15.3703 7.49997 15.75C7.49997 16.1642 7.83579 16.5 8.25 16.5L8.40405 16.5052C9.57484 16.5844 10.5 17.5591 10.5 18.75C10.5 19.9926 9.49264 21 8.25 21L8.24656 21.0046L8.14482 21.0119C7.77898 21.0633 7.49826 21.3783 7.49997 21.758C7.50191 22.1722 7.83923 22.5065 8.25344 22.5046V22.5L8.45228 22.4948C10.4276 22.3913 12 20.7543 12 18.75ZM5.5 15.75C5.5 15.3358 5.16421 15 4.75 15L4.55084 15.0052C2.57236 15.1087 1 16.7457 1 18.75C1 20.8211 2.67893 22.5 4.75 22.5L4.85177 22.4932C5.21785 22.4435 5.5 22.1297 5.5 21.75C5.5 21.3358 5.16421 21 4.75 21L4.59595 20.9948C3.42516 20.9156 2.5 19.9409 2.5 18.75C2.5 17.5074 3.50736 16.5 4.75 16.5L4.85177 16.4932C5.21785 16.4435 5.5 16.1297 5.5 15.75ZM9 18.75C9 18.3358 8.66421 18 8.25 18H4.75L4.64823 18.0068C4.28215 18.0565 4 18.3703 4 18.75C4 19.1642 4.33579 19.5 4.75 19.5H8.25L8.35177 19.4932C8.71785 19.4435 9 19.1297 9 18.75Z" 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_link_24_regular.svg";

Details