Document Catch Up icon
Used to represent file activity and actions. The Document Catch Up icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Document 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 { DocumentCatchUp24Regular, DocumentCatchUp24Filled } from "@fluentui/react-icons";
export function Example() {
return <DocumentCatchUp24Regular aria-label="Document Catch Up" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_document_catch_up_24_regular.svg" width="24" height="24" alt="Document 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="M18 20.5C18.276 20.5 18.5 20.275 18.5 20V10H14C12.896 10 12 9.104 12 8V3.5H6C5.724 3.5 5.5 3.725 5.5 4V9.25C5.5 9.66421 5.16421 10 4.75 10C4.33579 10 4 9.66421 4 9.25V4C4 2.896 4.896 2 6 2H12.172C12.6865 2 13.2194 2.22035 13.585 2.586L19.414 8.414C19.789 8.789 20 9.298 20 9.828V20C20 21.104 19.104 22 18 22H6C4.896 22 4 21.104 4 20V16.25C4 15.8358 4.33579 15.5 4.75 15.5C5.16421 15.5 5.5 15.8358 5.5 16.25V20C5.5 20.275 5.724 20.5 6 20.5H18ZM17.378 8.5L13.5 4.621V8C13.5 8.275 13.724 8.5 14 8.5H17.378ZM2.75 13L5.25508 13L6.81175 9.4489C7.06044 8.88157 7.8355 8.85277 8.13885 9.35798L8.14458 9.36751L8.1949 9.4712L10.6081 15.4977L12.0348 13.3979C12.1462 13.1882 12.3493 13.0454 12.5802 13.0091L12.5909 13.0074L12.6971 12.9999H14.697C15.1112 12.9999 15.447 13.3357 15.447 13.7499C15.447 14.1255 15.1708 14.4369 14.8101 14.4915L14.7998 14.493L14.697 14.4999H13.1428L11.1641 17.5937C10.8889 18.12 10.1499 18.124 9.85818 17.6344L9.85261 17.6251L9.80375 17.524L7.46737 11.6894L6.4321 14.0511C6.33564 14.2712 6.14148 14.4284 5.9136 14.4809C5.89841 14.4844 5.88306 14.4874 5.86759 14.49L5.85645 14.4918L5.7452 14.5L2.75 14.5C2.33579 14.5 2 14.1642 2 13.75C2 13.3744 2.27619 13.063 2.63692 13.0085L2.64718 13.0069L2.75 13Z" 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/document_catch_up_24_regular.svg";Details
| Name | Document Catch Up |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_document_catch_up_24_regular.svg |
| Filled file | ic_fluent_document_catch_up_24_filled.svg |
| React components | DocumentCatchUp24Regular, DocumentCatchUp24Filled |
| License | MIT (© Microsoft Corporation) |