Approvals App icon

Use the Approvals App 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 { ApprovalsApp24Regular, ApprovalsApp24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ApprovalsApp24Regular aria-label="Approvals App" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_approvals_app_24_regular.svg" width="24" height="24" alt="Approvals App">

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="M11.7803 1.71966C11.4874 1.42677 11.0125 1.42678 10.7197 1.71968C10.4268 2.01258 10.4268 2.48746 10.7197 2.78034L11.9396 4.0002C6.99683 4.03268 3 8.04959 3 13C3 17.9706 7.02944 22 12 22C16.6942 22 20.5483 18.4068 20.9631 13.8202C21.0004 13.4077 20.6962 13.043 20.2837 13.0057C19.8712 12.9684 19.5065 13.2726 19.4692 13.6851C19.1236 17.5058 15.9111 20.5 12 20.5C7.85786 20.5 4.5 17.1421 4.5 13C4.5 8.87822 7.82493 5.53303 11.939 5.50024L10.7197 6.71955C10.4268 7.01244 10.4268 7.48732 10.7197 7.78021C11.0126 8.0731 11.4874 8.0731 11.7803 7.78021L14.2803 5.28021C14.421 5.13955 14.5 4.94878 14.5 4.74987C14.5 4.55095 14.421 4.36019 14.2803 4.21954L11.7803 1.71966ZM15.7837 10.2197C16.0766 10.5126 16.0766 10.9874 15.7837 11.2803L11.2803 15.7838C11.1397 15.9244 10.9489 16.0034 10.75 16.0034C10.5511 16.0035 10.3603 15.9244 10.2197 15.7838L8.21967 13.7838C7.92678 13.4909 7.92678 13.016 8.21967 12.7231C8.51256 12.4302 8.98744 12.4302 9.28033 12.7231L10.75 14.1928L14.723 10.2197C15.0159 9.92678 15.4908 9.92677 15.7837 10.2197Z" 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/approvals_app_24_regular.svg";

Details

Keywords

checkmarkarrowclockwiseteams