cloud words icon

cloud-words-24 from Fluent UI System Color Icons by Microsoft Corporation · 24 · MIT Free for personal and commercial use.

Name: cloud-words-24
Set: Fluent UI System Color Icons
Style: 24
Viewbox: 24×24
License: MIT

5 other variants in Fluent UI System Color Icons

cloud-words-16 cloud-words-20 cloud-words-28 cloud-words-32 cloud-words-48

The same icon in other sets

cloud-words-16-filledFluent UI System Icons

Related icons in Fluent UI System Color Icons

cloud-dismiss-16

Use the cloud words icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGzJjP3c3Z)" d="M6.08 10.02a6.001 6.001 0 0 1 11.84 0A4.5 4.5 0 0 1 17.5 19h-11a4.5 4.5 0 0 1-.42-8.98"/><path fill="url(#SVGrOg2VjbW)" fill-opacity=".3" d="M11 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0"/><path fill="url(#SVG60A5Ukde)" fill-opacity=".3" d="M12 17a6 6 0 1 0-5.92-6.98q.207-.02.42-.02a4.5 4.5 0 0 1 3.88 6.779A6 6 0 0 0 12 17"/><path fill="url(#SVGALGygbjN)" d="M12 17a6 6 0 1 0-5.92-6.98q.207-.02.42-.02a4.5 4.5 0 0 1 3.88 6.779A6 6 0 0 0 12 17"/><path fill="url(#SVGviCuDdqg)" fill-opacity=".5" d="M6.08 10.02a6.001 6.001 0 0 1 11.84 0A4.5 4.5 0 0 1 17.5 19h-11a4.5 4.5 0 0 1-.42-8.98"/><path fill="url(#SVGEco4927u)" fill-opacity=".95" d="M10 9.5a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5zm-4.5 4.75a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75m8.25-.75a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5z"/><defs><linearGradient id="SVGzJjP3c3Z" x1="2.714" x2="11.675" y1="7.625" y2="20.925" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGrOg2VjbW" x1="2" x2="8.067" y1="11.542" y2="16.912" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fcfcfc" stop-opacity="0"/></linearGradient><linearGradient id="SVG60A5Ukde" x1="8.146" x2="9.738" y1="5.675" y2="13.946" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fcfcfc" stop-opacity="0"/></linearGradient><linearGradient id="SVGEco4927u" x1="22.833" x2="16.2" y1="18.667" y2="1.95" gradientUnits="userSpaceOnUse"><stop stop-color="#b3e0ff"/><stop offset="1" stop-color="#fff"/></linearGradient><radialGradient id="SVGALGygbjN" cx="0" cy="0" r="1" gradientTransform="rotate(-22.986 39.73 -8.686)scale(7.29834 6.53738)" gradientUnits="userSpaceOnUse"><stop offset=".412" stop-color="#2c87f5"/><stop offset="1" stop-color="#2c87f5" stop-opacity="0"/></radialGradient><radialGradient id="SVGviCuDdqg" cx="0" cy="0" r="1" gradientTransform="rotate(63.575 2.255 11.072)scale(17.3211 125.045)" gradientUnits="userSpaceOnUse"><stop offset=".5" stop-color="#dd3ce2" stop-opacity="0"/><stop offset="1" stop-color="#dd3ce2"/></radialGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function FluentColorCloudWords24(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGzJjP3c3Z)" d="M6.08 10.02a6.001 6.001 0 0 1 11.84 0A4.5 4.5 0 0 1 17.5 19h-11a4.5 4.5 0 0 1-.42-8.98"/><path fill="url(#SVGrOg2VjbW)" fillOpacity=".3" d="M11 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0"/><path fill="url(#SVG60A5Ukde)" fillOpacity=".3" d="M12 17a6 6 0 1 0-5.92-6.98q.207-.02.42-.02a4.5 4.5 0 0 1 3.88 6.779A6 6 0 0 0 12 17"/><path fill="url(#SVGALGygbjN)" d="M12 17a6 6 0 1 0-5.92-6.98q.207-.02.42-.02a4.5 4.5 0 0 1 3.88 6.779A6 6 0 0 0 12 17"/><path fill="url(#SVGviCuDdqg)" fillOpacity=".5" d="M6.08 10.02a6.001 6.001 0 0 1 11.84 0A4.5 4.5 0 0 1 17.5 19h-11a4.5 4.5 0 0 1-.42-8.98"/><path fill="url(#SVGEco4927u)" fillOpacity=".95" d="M10 9.5a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5zm-4.5 4.75a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75m8.25-.75a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5z"/><defs><linearGradient id="SVGzJjP3c3Z" x1="2.714" x2="11.675" y1="7.625" y2="20.925" gradientUnits="userSpaceOnUse"><stop stopColor="#0fafff"/><stop offset="1" stopColor="#367af2"/></linearGradient><linearGradient id="SVGrOg2VjbW" x1="2" x2="8.067" y1="11.542" y2="16.912" gradientUnits="userSpaceOnUse"><stop stopColor="#fff"/><stop offset="1" stopColor="#fcfcfc" stopOpacity="0"/></linearGradient><linearGradient id="SVG60A5Ukde" x1="8.146" x2="9.738" y1="5.675" y2="13.946" gradientUnits="userSpaceOnUse"><stop stopColor="#fff"/><stop offset="1" stopColor="#fcfcfc" stopOpacity="0"/></linearGradient><linearGradient id="SVGEco4927u" x1="22.833" x2="16.2" y1="18.667" y2="1.95" gradientUnits="userSpaceOnUse"><stop stopColor="#b3e0ff"/><stop offset="1" stopColor="#fff"/></linearGradient><radialGradient id="SVGALGygbjN" cx="0" cy="0" r="1" gradientTransform="rotate(-22.986 39.73 -8.686)scale(7.29834 6.53738)" gradientUnits="userSpaceOnUse"><stop offset=".412" stopColor="#2c87f5"/><stop offset="1" stopColor="#2c87f5" stopOpacity="0"/></radialGradient><radialGradient id="SVGviCuDdqg" cx="0" cy="0" r="1" gradientTransform="rotate(63.575 2.255 11.072)scale(17.3211 125.045)" gradientUnits="userSpaceOnUse"><stop offset=".5" stopColor="#dd3ce2" stopOpacity="0"/><stop offset="1" stopColor="#dd3ce2"/></radialGradient></defs></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGzJjP3c3Z)" d="M6.08 10.02a6.001 6.001 0 0 1 11.84 0A4.5 4.5 0 0 1 17.5 19h-11a4.5 4.5 0 0 1-.42-8.98"/><path fill="url(#SVGrOg2VjbW)" fill-opacity=".3" d="M11 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0"/><path fill="url(#SVG60A5Ukde)" fill-opacity=".3" d="M12 17a6 6 0 1 0-5.92-6.98q.207-.02.42-.02a4.5 4.5 0 0 1 3.88 6.779A6 6 0 0 0 12 17"/><path fill="url(#SVGALGygbjN)" d="M12 17a6 6 0 1 0-5.92-6.98q.207-.02.42-.02a4.5 4.5 0 0 1 3.88 6.779A6 6 0 0 0 12 17"/><path fill="url(#SVGviCuDdqg)" fill-opacity=".5" d="M6.08 10.02a6.001 6.001 0 0 1 11.84 0A4.5 4.5 0 0 1 17.5 19h-11a4.5 4.5 0 0 1-.42-8.98"/><path fill="url(#SVGEco4927u)" fill-opacity=".95" d="M10 9.5a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5zm-4.5 4.75a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75m8.25-.75a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5z"/><defs><linearGradient id="SVGzJjP3c3Z" x1="2.714" x2="11.675" y1="7.625" y2="20.925" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGrOg2VjbW" x1="2" x2="8.067" y1="11.542" y2="16.912" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fcfcfc" stop-opacity="0"/></linearGradient><linearGradient id="SVG60A5Ukde" x1="8.146" x2="9.738" y1="5.675" y2="13.946" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fcfcfc" stop-opacity="0"/></linearGradient><linearGradient id="SVGEco4927u" x1="22.833" x2="16.2" y1="18.667" y2="1.95" gradientUnits="userSpaceOnUse"><stop stop-color="#b3e0ff"/><stop offset="1" stop-color="#fff"/></linearGradient><radialGradient id="SVGALGygbjN" cx="0" cy="0" r="1" gradientTransform="rotate(-22.986 39.73 -8.686)scale(7.29834 6.53738)" gradientUnits="userSpaceOnUse"><stop offset=".412" stop-color="#2c87f5"/><stop offset="1" stop-color="#2c87f5" stop-opacity="0"/></radialGradient><radialGradient id="SVGviCuDdqg" cx="0" cy="0" r="1" gradientTransform="rotate(63.575 2.255 11.072)scale(17.3211 125.045)" gradientUnits="userSpaceOnUse"><stop offset=".5" stop-color="#dd3ce2" stop-opacity="0"/><stop offset="1" stop-color="#dd3ce2"/></radialGradient></defs></g></svg>
</template>

CSS

.icon-cloud-words-24 {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGzJjP3c3Z)%22%20d%3D%22M6.08%2010.02a6.001%206.001%200%200%201%2011.84%200A4.5%204.5%200%200%201%2017.5%2019h-11a4.5%204.5%200%200%201-.42-8.98%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGrOg2VjbW)%22%20fill-opacity%3D%22.3%22%20d%3D%22M11%2014.5a4.5%204.5%200%201%201-9%200a4.5%204.5%200%200%201%209%200%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG60A5Ukde)%22%20fill-opacity%3D%22.3%22%20d%3D%22M12%2017a6%206%200%201%200-5.92-6.98q.207-.02.42-.02a4.5%204.5%200%200%201%203.88%206.779A6%206%200%200%200%2012%2017%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGALGygbjN)%22%20d%3D%22M12%2017a6%206%200%201%200-5.92-6.98q.207-.02.42-.02a4.5%204.5%200%200%201%203.88%206.779A6%206%200%200%200%2012%2017%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGviCuDdqg)%22%20fill-opacity%3D%22.5%22%20d%3D%22M6.08%2010.02a6.001%206.001%200%200%201%2011.84%200A4.5%204.5%200%200%201%2017.5%2019h-11a4.5%204.5%200%200%201-.42-8.98%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGEco4927u)%22%20fill-opacity%3D%22.95%22%20d%3D%22M10%209.5a.75.75%200%200%200%200%201.5h4a.75.75%200%200%200%200-1.5zm-4.5%204.75a.75.75%200%200%201%20.75-.75h4a.75.75%200%200%201%200%201.5h-4a.75.75%200%200%201-.75-.75m8.25-.75a.75.75%200%200%200%200%201.5h4a.75.75%200%200%200%200-1.5z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGzJjP3c3Z%22%20x1%3D%222.714%22%20x2%3D%2211.675%22%20y1%3D%227.625%22%20y2%3D%2220.925%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23367af2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGrOg2VjbW%22%20x1%3D%222%22%20x2%3D%228.067%22%20y1%3D%2211.542%22%20y2%3D%2216.912%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fcfcfc%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG60A5Ukde%22%20x1%3D%228.146%22%20x2%3D%229.738%22%20y1%3D%225.675%22%20y2%3D%2213.946%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fcfcfc%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGEco4927u%22%20x1%3D%2222.833%22%20x2%3D%2216.2%22%20y1%3D%2218.667%22%20y2%3D%221.95%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23b3e0ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGALGygbjN%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(-22.986%2039.73%20-8.686)scale(7.29834%206.53738)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.412%22%20stop-color%3D%22%232c87f5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232c87f5%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGviCuDdqg%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(63.575%202.255%2011.072)scale(17.3211%20125.045)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23dd3ce2%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23dd3ce2%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGzJjP3c3Z)%22%20d%3D%22M6.08%2010.02a6.001%206.001%200%200%201%2011.84%200A4.5%204.5%200%200%201%2017.5%2019h-11a4.5%204.5%200%200%201-.42-8.98%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGrOg2VjbW)%22%20fill-opacity%3D%22.3%22%20d%3D%22M11%2014.5a4.5%204.5%200%201%201-9%200a4.5%204.5%200%200%201%209%200%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG60A5Ukde)%22%20fill-opacity%3D%22.3%22%20d%3D%22M12%2017a6%206%200%201%200-5.92-6.98q.207-.02.42-.02a4.5%204.5%200%200%201%203.88%206.779A6%206%200%200%200%2012%2017%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGALGygbjN)%22%20d%3D%22M12%2017a6%206%200%201%200-5.92-6.98q.207-.02.42-.02a4.5%204.5%200%200%201%203.88%206.779A6%206%200%200%200%2012%2017%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGviCuDdqg)%22%20fill-opacity%3D%22.5%22%20d%3D%22M6.08%2010.02a6.001%206.001%200%200%201%2011.84%200A4.5%204.5%200%200%201%2017.5%2019h-11a4.5%204.5%200%200%201-.42-8.98%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGEco4927u)%22%20fill-opacity%3D%22.95%22%20d%3D%22M10%209.5a.75.75%200%200%200%200%201.5h4a.75.75%200%200%200%200-1.5zm-4.5%204.75a.75.75%200%200%201%20.75-.75h4a.75.75%200%200%201%200%201.5h-4a.75.75%200%200%201-.75-.75m8.25-.75a.75.75%200%200%200%200%201.5h4a.75.75%200%200%200%200-1.5z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGzJjP3c3Z%22%20x1%3D%222.714%22%20x2%3D%2211.675%22%20y1%3D%227.625%22%20y2%3D%2220.925%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23367af2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGrOg2VjbW%22%20x1%3D%222%22%20x2%3D%228.067%22%20y1%3D%2211.542%22%20y2%3D%2216.912%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fcfcfc%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG60A5Ukde%22%20x1%3D%228.146%22%20x2%3D%229.738%22%20y1%3D%225.675%22%20y2%3D%2213.946%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fcfcfc%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGEco4927u%22%20x1%3D%2222.833%22%20x2%3D%2216.2%22%20y1%3D%2218.667%22%20y2%3D%221.95%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23b3e0ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGALGygbjN%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(-22.986%2039.73%20-8.686)scale(7.29834%206.53738)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.412%22%20stop-color%3D%22%232c87f5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232c87f5%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGviCuDdqg%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(63.575%202.255%2011.072)scale(17.3211%20125.045)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23dd3ce2%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23dd3ce2%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/cloud-words-24.svg?color=%231a73e8&size=48