Script icon

Use the Script 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 { Script24Regular, Script24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Script24Regular aria-label="Script" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_script_24_regular.svg" width="24" height="24" alt="Script">

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="M19.7992 2.00774V2H7.75C5.95507 2 4.5 3.45507 4.5 5.25V15.5H2.75C1.7835 15.5 1 16.2835 1 17.25V19.075C1 20.7647 2.37686 22 4 22H15.0195V21.9919C15.0971 21.9972 15.1752 22 15.2539 22C17.0144 22 18.51 20.645 18.531 18.8875L18.5312 18.85V8.5L21.7955 8.5C22.4607 8.5 23 7.96071 23 7.29545V4.98414C23 3.33604 21.664 2 20.0159 2C19.943 2 19.8708 2.00261 19.7992 2.00774ZM7.75 3.5H17.4264C17.1752 3.93722 17.0317 4.44408 17.0317 4.98447L17.0312 18.85C17.0312 19.7252 16.2725 20.5 15.2539 20.5C14.2353 20.5 13.4766 19.7252 13.4766 18.85V16.75C13.4766 16.0596 12.9169 15.5 12.2266 15.5H6V5.25C6 4.2835 6.7835 3.5 7.75 3.5ZM2.75 17H11.9766V18.85C11.9766 19.4606 12.1545 20.0238 12.46 20.5H4C3.13786 20.5 2.5 19.8705 2.5 19.075V17.25C2.5 17.1119 2.61193 17 2.75 17ZM21.5 4.98414V7L18.5319 7L18.5317 4.98431C18.5316 4.16457 19.1961 3.5 20.0159 3.5C20.8355 3.5 21.5 4.16447 21.5 4.98414Z" 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/script_24_regular.svg";

Details

Keywords

scriptscrolltemplate