Cloud icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.5H17.5C19.1569 16.5 20.5 15.1569 20.5 13.5C20.5 11.8431 19.1569 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.5ZM6.07981 9.01936C6.54808 6.17188 9.02022 4 12 4C14.9798 4 17.4519 6.17189 17.9202 9.01936C20.2085 9.23125 22 11.1564 22 13.5C22 15.9853 19.9853 18 17.5 18H6.5C4.01472 18 2 15.9853 2 13.5C2 11.1564 3.79155 9.23125 6.07981 9.01936Z" 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_24_regular.svg";

Details

Keywords

storageuploaddownloadsavesync