Cloud Edit icon

Use the Cloud Edit 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 { CloudEdit24Regular, CloudEdit24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CloudEdit24Regular aria-label="Cloud Edit" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_cloud_edit_24_regular.svg" width="24" height="24" alt="Cloud Edit">

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="M12 5.5C9.58676 5.5 7.61684 7.39994 7.50502 9.78512C7.48627 10.1852 7.15641 10.5 6.75585 10.5H6.5C4.84315 10.5 3.5 11.8431 3.5 13.5C3.5 15.1569 4.84315 16.5 6.5 16.5H12.855L12.4903 16.8648C12.1624 17.1927 11.9006 17.5781 11.717 18H6.5C4.01472 18 2 15.9853 2 13.5C2 11.1564 3.79155 9.23125 6.07981 9.01936C6.54808 6.17188 9.02022 4 12 4C14.9798 4 17.4519 6.17189 17.9202 9.01936C18.8393 9.10447 19.6783 9.46598 20.3532 10.02C19.7454 10.0871 19.1528 10.3235 18.6518 10.7291C18.2971 10.5815 17.9081 10.5 17.5 10.5H17.2442C16.8436 10.5 16.5137 10.1852 16.495 9.78512C16.3832 7.39994 14.4132 5.5 12 5.5ZM19.0999 11.6695L13.1974 17.5719C12.8533 17.916 12.6092 18.3472 12.4911 18.8194L12.0334 20.6501C11.8344 21.4462 12.5556 22.1674 13.3517 21.9683L15.1824 21.5106C15.6545 21.3926 16.0857 21.1485 16.4299 20.8043L22.3323 14.9019C23.2249 14.0093 23.2249 12.5621 22.3323 11.6695C21.4397 10.7768 19.9925 10.7768 19.0999 11.6695Z" 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_edit_24_regular.svg";

Details

Keywords

storageuploaddownloadsavesync