Mail Arrow Clockwise icon

Use the Mail Arrow Clockwise 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 { MailArrowClockwise24Regular, MailArrowClockwise24Filled } from "@fluentui/react-icons";

export function Example() {
  return <MailArrowClockwise24Regular aria-label="Mail Arrow Clockwise" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_mail_arrow_clockwise_24_regular.svg" width="24" height="24" alt="Mail Arrow Clockwise">

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="M23 0.75C23 0.335786 22.6642 0 22.25 0C21.8358 0 21.5 0.335786 21.5 0.75V1.37612C20.5149 0.667643 19.3054 0.25 18 0.25C14.6863 0.25 12 2.93629 12 6.25C12 9.56371 14.6863 12.25 18 12.25C21.3137 12.25 24 9.56371 24 6.25C24 5.83579 23.6642 5.5 23.25 5.5C22.8358 5.5 22.5 5.83579 22.5 6.25C22.5 8.73528 20.4853 10.75 18 10.75C15.5147 10.75 13.5 8.73528 13.5 6.25C13.5 3.76472 15.5147 1.75 18 1.75C19.0649 1.75 20.0416 2.11897 20.8121 2.73666C20.8147 2.73868 20.8172 2.74068 20.8197 2.74266C20.8229 2.74514 20.8261 2.74758 20.8293 2.75H19.5C19.0858 2.75 18.75 3.08579 18.75 3.5C18.75 3.91421 19.0858 4.25 19.5 4.25H22.25C22.6642 4.25 23 3.91421 23 3.5V0.75ZM22 16.75V11.9953C21.5377 12.3178 21.0346 12.5859 20.5 12.7904V16.75L20.4942 16.8935C20.4212 17.7929 19.6682 18.5 18.75 18.5H5.25L5.10647 18.4942C4.20711 18.4212 3.5 17.6682 3.5 16.75V9.374L11.6507 13.6637L11.7468 13.706C11.9431 13.7764 12.1619 13.7623 12.3493 13.6637L14.7013 12.4256C14.2021 12.1584 13.739 11.8324 13.3214 11.4569L12 12.1525L3.5 7.679V7.25L3.5058 7.10647C3.57881 6.20711 4.33183 5.5 5.25 5.5H11.0397C11.095 4.98094 11.207 4.47883 11.3695 4H5.25L5.06558 4.00514C3.35645 4.10075 2 5.51697 2 7.25V16.75L2.00514 16.9344C2.10075 18.6435 3.51697 20 5.25 20H18.75L18.9344 19.9949C20.6435 19.8992 22 18.483 22 16.75Z" 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/mail_arrow_clockwise_24_regular.svg";

Details