Cloud Words icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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 10.7851C7.61684 8.39994 9.58676 6.5 12 6.5C14.4132 6.5 16.3832 8.39994 16.495 10.7851C16.5137 11.1852 16.8436 11.5 17.2442 11.5H17.5C19.1569 11.5 20.5 12.8431 20.5 14.5C20.5 16.1569 19.1569 17.5 17.5 17.5H6.5C4.84315 17.5 3.5 16.1569 3.5 14.5C3.5 12.8431 4.84315 11.5 6.5 11.5H6.75585C7.15641 11.5 7.48627 11.1852 7.50502 10.7851ZM12 5C9.02022 5 6.54808 7.17188 6.07981 10.0194C3.79155 10.2313 2 12.1564 2 14.5C2 16.9853 4.01472 19 6.5 19H17.5C19.9853 19 22 16.9853 22 14.5C22 12.1564 20.2085 10.2313 17.9202 10.0194C17.4519 7.17189 14.9798 5 12 5ZM10 9.5C9.58579 9.5 9.25 9.83579 9.25 10.25C9.25 10.6642 9.58579 11 10 11H14C14.4142 11 14.75 10.6642 14.75 10.25C14.75 9.83579 14.4142 9.5 14 9.5H10ZM5.5 14.25C5.5 13.8358 5.83579 13.5 6.25 13.5H10.25C10.6642 13.5 11 13.8358 11 14.25C11 14.6642 10.6642 15 10.25 15H6.25C5.83579 15 5.5 14.6642 5.5 14.25ZM13.75 13.5C13.3358 13.5 13 13.8358 13 14.25C13 14.6642 13.3358 15 13.75 15H17.75C18.1642 15 18.5 14.6642 18.5 14.25C18.5 13.8358 18.1642 13.5 17.75 13.5H13.75Z" 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_words_24_regular.svg";

Details

Keywords

editwordcloud