Share Screen Start icon

Use the Share Screen Start 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 { ShareScreenStart24Regular, ShareScreenStart24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ShareScreenStart24Regular aria-label="Share Screen Start" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_share_screen_start_24_regular.svg" width="24" height="24" alt="Share Screen Start">

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="M2 6.25C2 5.00736 3.00736 4 4.25 4H19.75C20.9926 4 22 5.00736 22 6.25V17.75C22 18.9926 20.9926 20 19.75 20H4.25C3.00736 20 2 18.9926 2 17.75V6.25ZM4.25 5.5C3.83579 5.5 3.5 5.83579 3.5 6.25V17.75C3.5 18.1642 3.83579 18.5 4.25 18.5H19.75C20.1642 18.5 20.5 18.1642 20.5 17.75V6.25C20.5 5.83579 20.1642 5.5 19.75 5.5H4.25ZM11.9997 7.24547C12.1987 7.2454 12.3896 7.32443 12.5303 7.46514L15.7848 10.7197C16.0777 11.0126 16.0777 11.4874 15.7848 11.7803C15.4919 12.0732 15.0171 12.0732 14.7242 11.7803L12.75 9.80613V16.2528C12.75 16.667 12.4142 17.0028 12 17.0028C11.5858 17.0028 11.25 16.667 11.25 16.2528V9.80791L9.2807 11.7799C8.98801 12.073 8.51314 12.0734 8.22004 11.7807C7.92694 11.488 7.92661 11.0131 8.2193 10.72L11.4693 7.46551C11.6099 7.3247 11.8007 7.24554 11.9997 7.24547Z" 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/share_screen_start_24_regular.svg";

Details

Keywords

screensharearrowup