Cloud Link icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.5H10.0065C10.0338 17.0273 10.1472 17.5319 10.3328 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.01936C20.1529 9.22611 21.9128 11.064 21.9969 13.3301C21.4788 12.6663 20.7882 12.1437 19.9924 11.8298C19.4539 11.0278 18.5386 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.5ZM22 16.25C22 14.1789 20.3211 12.5 18.25 12.5L18.1482 12.5068C17.7822 12.5565 17.5 12.8703 17.5 13.25C17.5 13.6642 17.8358 14 18.25 14L18.404 14.0052C19.5748 14.0844 20.5 15.0591 20.5 16.25C20.5 17.4926 19.4926 18.5 18.25 18.5L18.2466 18.5046L18.1448 18.5119C17.779 18.5633 17.4983 18.8783 17.5 19.258C17.5019 19.6722 17.8392 20.0065 18.2534 20.0046V20L18.4523 19.9948C20.4276 19.8913 22 18.2543 22 16.25ZM15.5 13.25C15.5 12.8358 15.1642 12.5 14.75 12.5L14.5508 12.5052C12.5724 12.6087 11 14.2457 11 16.25C11 18.3211 12.6789 20 14.75 20L14.8518 19.9932C15.2178 19.9435 15.5 19.6297 15.5 19.25C15.5 18.8358 15.1642 18.5 14.75 18.5L14.596 18.4948C13.4252 18.4156 12.5 17.4409 12.5 16.25C12.5 15.0074 13.5074 14 14.75 14L14.8518 13.9932C15.2178 13.9435 15.5 13.6297 15.5 13.25ZM19 16.25C19 15.8358 18.6642 15.5 18.25 15.5H14.75L14.6482 15.5068C14.2822 15.5565 14 15.8703 14 16.25C14 16.6642 14.3358 17 14.75 17H18.25L18.3518 16.9932C18.7178 16.9435 19 16.6297 19 16.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_link_24_regular.svg";

Details

Keywords

storageuploaddownloadsavesync