Attach Arrow Right icon
Used to represent files attached to communications. The Attach Arrow Right 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 Attach Arrow Right 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 { AttachArrowRight24Regular, AttachArrowRight24Filled } from "@fluentui/react-icons";
export function Example() {
return <AttachArrowRight24Regular aria-label="Attach Arrow Right" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_attach_arrow_right_24_regular.svg" width="24" height="24" alt="Attach Arrow Right"> 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.7722 3.74407C14.1136 1.40049 17.9126 1.40049 20.2558 3.74363C22.4631 5.95098 22.5911 9.45031 20.6396 11.8074C20.1758 11.5511 19.6773 11.3499 19.153 11.2125L19.197 11.1685C20.9525 9.41089 20.9525 6.56165 19.1951 4.80429C17.4927 3.10185 14.7655 3.04865 12.999 4.64469L12.8312 4.80429L12.8186 4.8186L3.28228 14.3549C2.98939 14.6478 2.51452 14.6478 2.22162 14.3549C1.95536 14.0887 1.93115 13.672 2.149 13.3784L2.22162 13.2943L11.7705 3.74363L11.7722 3.74407ZM11.2121 19.1514C11.3519 19.6855 11.5579 20.1927 11.8209 20.6638L11.4432 21.0414L11.4066 21.0717C9.94541 22.3884 7.69141 22.3437 6.28404 20.9363C4.96502 19.6173 4.8429 17.5546 5.91769 16.0979C5.94103 16.0525 5.96928 16.0088 6.00249 15.9677L6.05605 15.908L6.14295 15.8203L6.28404 15.6724L6.28695 15.6753L13.7227 8.22096C13.9886 7.95434 14.4052 7.92958 14.6991 8.14704L14.7834 8.21955C15.05 8.48546 15.0747 8.90209 14.8573 9.19599L14.7848 9.28021L7.19015 16.8933C6.47251 17.7689 6.52239 19.0632 7.33979 19.8806C8.16885 20.7096 9.4885 20.7491 10.3643 19.999L11.2121 19.1514ZM23.0006 17.5006C23.0006 20.5382 20.5382 23.0006 17.5006 23.0006C14.463 23.0006 12.0006 20.5382 12.0006 17.5006C12.0006 14.463 14.463 12.0006 17.5006 12.0006C20.5382 12.0006 23.0006 14.463 23.0006 17.5006ZM14.5006 17.0006C14.2245 17.0006 14.0006 17.2245 14.0006 17.5006C14.0006 17.7768 14.2245 18.0006 14.5006 18.0006H19.2935L17.6471 19.6471C17.4518 19.8423 17.4518 20.1589 17.6471 20.3542C17.8423 20.5494 18.1589 20.5494 18.3542 20.3542L20.8542 17.8542C21.0494 17.6589 21.0494 17.3423 20.8542 17.1471L18.3542 14.6471C18.1589 14.4518 17.8423 14.4518 17.6471 14.6471C17.4518 14.8423 17.4518 15.1589 17.6471 15.3542L19.2935 17.0006L14.5006 17.0006Z" 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/attach_arrow_right_24_regular.svg";Details
| Name | Attach Arrow Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_attach_arrow_right_24_regular.svg |
| Filled file | ic_fluent_attach_arrow_right_24_filled.svg |
| React components | AttachArrowRight24Regular, AttachArrowRight24Filled |
| License | MIT (© Microsoft Corporation) |