Cloud Arrow Right icon
Used in all stored data scenarios. The Cloud 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 Cloud 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 { CloudArrowRight24Regular, CloudArrowRight24Filled } from "@fluentui/react-icons";
export function Example() {
return <CloudArrowRight24Regular aria-label="Cloud Arrow Right" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_cloud_arrow_right_24_regular.svg" width="24" height="24" alt="Cloud 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="M7.50502 8.78512C7.61684 6.39994 9.58676 4.5 12 4.5C14.4132 4.5 16.3832 6.39994 16.495 8.78512C16.5137 9.18524 16.8436 9.5 17.2442 9.5H17.5C18.6659 9.5 19.6764 10.165 20.1729 11.1365C20.8898 11.6283 21.5031 12.2601 21.9734 12.9925C21.991 12.8307 22 12.6664 22 12.5C22 10.1564 20.2085 8.23125 17.9202 8.01936C17.4519 5.17189 14.9798 3 12 3C9.02022 3 6.54808 5.17188 6.07981 8.01936C3.79155 8.23125 2 10.1564 2 12.5C2 14.9853 4.01472 17 6.5 17H10.0189C10.0064 16.835 10 16.6682 10 16.5C10 16.1599 10.0261 15.826 10.0764 15.5H6.5C4.84315 15.5 3.5 14.1569 3.5 12.5C3.5 10.8431 4.84315 9.5 6.5 9.5H6.75585C7.15641 9.5 7.48627 9.18524 7.50502 8.78512ZM16.5 11C19.5376 11 22 13.4624 22 16.5C22 19.5376 19.5376 22 16.5 22C13.4624 22 11 19.5376 11 16.5C11 13.4624 13.4624 11 16.5 11ZM13.5 16C13.2239 16 13 16.2239 13 16.5C13 16.7761 13.2239 17 13.5 17H18.2929L16.6464 18.6464C16.4512 18.8417 16.4512 19.1583 16.6464 19.3536C16.8417 19.5488 17.1583 19.5488 17.3536 19.3536L19.8536 16.8536C20.0488 16.6583 20.0488 16.3417 19.8536 16.1464L17.3536 13.6464C17.1583 13.4512 16.8417 13.4512 16.6464 13.6464C16.4512 13.8417 16.4512 14.1583 16.6464 14.3536L18.2929 16H13.5Z" 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/cloud_arrow_right_24_regular.svg";Details
| Name | Cloud Arrow Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_cloud_arrow_right_24_regular.svg |
| Filled file | ic_fluent_cloud_arrow_right_24_filled.svg |
| React components | CloudArrowRight24Regular, CloudArrowRight24Filled |
| License | MIT (© Microsoft Corporation) |