Cloud Flow icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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 7.78512C7.61684 5.39994 9.58676 3.5 12 3.5C14.4132 3.5 16.3832 5.39994 16.495 7.78512C16.5137 8.18524 16.8436 8.5 17.2442 8.5H17.5C19.0585 8.5 20.3394 9.68842 20.486 11.2085C21.0481 11.4046 21.5492 11.7308 21.9533 12.151C21.9841 11.9384 22 11.7211 22 11.5C22 9.15641 20.2085 7.23125 17.9202 7.01936C17.4519 4.17189 14.9798 2 12 2C9.02022 2 6.54808 4.17188 6.07981 7.01936C3.79155 7.23125 2 9.15641 2 11.5C2 13.9853 4.01472 16 6.5 16H13.1806L13.3129 15.4927C13.4081 15.1277 13.5682 14.7931 13.7787 14.5H6.5C4.84315 14.5 3.5 13.1569 3.5 11.5C3.5 9.84315 4.84315 8.5 6.5 8.5H6.75585C7.15641 8.5 7.48627 8.18524 7.50502 7.78512ZM19.25 13.5C19.9404 13.5 20.5 14.0596 20.5 14.75C20.5 15.4404 19.9404 16 19.25 16C18.5596 16 18 15.4404 18 14.75C18 14.0596 18.5596 13.5 19.25 13.5ZM16.2157 15.75H16.6875C17.0875 16.7743 18.084 17.5 19.25 17.5C20.7688 17.5 22 16.2688 22 14.75C22 13.2312 20.7688 12 19.25 12C17.902 12 16.7805 12.9699 16.5453 14.25H16.2157C15.3056 14.25 14.5102 14.8645 14.2805 15.7452L13.2681 19.6262C13.2106 19.8464 13.0118 20 12.7843 20H11.9888C11.8625 18.5984 10.6845 17.5 9.25 17.5C7.73122 17.5 6.5 18.7312 6.5 20.25C6.5 21.7688 7.73122 23 9.25 23C10.3187 23 11.245 22.3904 11.7001 21.5H12.7843C13.6944 21.5 14.4898 20.8855 14.7195 20.0048L15.7319 16.1238C15.7894 15.9036 15.9882 15.75 16.2157 15.75ZM8 20.25C8 19.5596 8.55964 19 9.25 19C9.94036 19 10.5 19.5596 10.5 20.25C10.5 20.9404 9.94036 21.5 9.25 21.5C8.55964 21.5 8 20.9404 8 20.25Z" 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_flow_24_regular.svg";

Details

Keywords

storageuploaddownloadsavesync