Catch Up icon

Use the Catch Up 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 { CatchUp24Regular, CatchUp24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CatchUp24Regular aria-label="Catch Up" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_catch_up_24_regular.svg" width="24" height="24" alt="Catch Up">

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="M9.27774 8.15741C9.36209 7.95092 9.65414 7.9499 9.73994 8.15579L12.9763 15.9223C13.55 17.299 15.4726 17.373 16.1505 16.0446L17.7505 12.9089C17.8786 12.6578 18.1367 12.4998 18.4186 12.4998H19.063C19.285 13.3624 20.0681 13.9998 21 13.9998C22.1046 13.9998 23 13.1043 23 11.9998C23 10.8952 22.1046 9.99977 21 9.99977C20.2597 9.99977 19.6134 10.402 19.2676 10.9998H18.4186C17.573 10.9998 16.7988 11.4739 16.4144 12.2271L14.8144 15.3628C14.7175 15.5526 14.4429 15.542 14.3609 15.3453L11.1245 7.57882C10.5239 6.13755 8.47963 6.14471 7.88914 7.59014L6.68674 10.5334C6.57152 10.8155 6.29712 10.9998 5.99244 10.9998H4.73244C4.38663 10.402 3.74029 9.99977 3 9.99977C1.89543 9.99977 1 10.8952 1 11.9998C1 13.1043 1.89543 13.9998 3 13.9998C3.93192 13.9998 4.71496 13.3624 4.93699 12.4998H5.99244C6.90647 12.4998 7.72967 11.9468 8.07534 11.1007L9.27774 8.15741Z" 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/catch_up_24_regular.svg";

Details

Keywords

pulseratemonitordocumentmentioncollaboration