Cloud Cube icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.5H12V17.753C12 17.836 12.0041 17.9184 12.0122 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.9735 4 17.4415 6.16274 17.9172 9.00137C17.5619 9.01314 17.2085 9.10066 16.882 9.26393L16.4692 9.47031C16.2073 7.23492 14.3061 5.5 12 5.5ZM22.1708 11.9084L18.6708 10.1584C18.2485 9.94721 17.7515 9.94721 17.3292 10.1584L13.8292 11.9084C13.321 12.1624 13 12.6818 13 13.25V17.753C13 18.3211 13.321 18.8405 13.8292 19.0946L17.3292 20.8446C17.7515 21.0557 18.2485 21.0557 18.6708 20.8446L22.1708 19.0946C22.679 18.8405 23 18.3211 23 17.753V13.25C23 12.6818 22.679 12.1624 22.1708 11.9084ZM14.5528 13.2764C14.6763 13.0294 14.9766 12.9293 15.2236 13.0528L18 14.441L20.7764 13.0528C21.0234 12.9293 21.3237 13.0294 21.4472 13.2764C21.5707 13.5234 21.4706 13.8237 21.2236 13.9472L18.5 15.3091V18.5C18.5 18.7762 18.2761 19 18 19C17.7239 19 17.5 18.7762 17.5 18.5V15.3091L14.7764 13.9472C14.5294 13.8237 14.4293 13.5234 14.5528 13.2764Z" 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_cube_24_regular.svg";

Details

Keywords

storageuploaddownloadsavesync