cloud words icon

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

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

5 other variants in Fluent UI System Color Icons

cloud-words-20 cloud-words-24 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 16 16"><g fill="none"><path fill="url(#SVGh3nO6cEW)" d="M4.03 6.507a4 4 0 0 1 7.94 0A3.25 3.25 0 0 1 11.75 13h-7.5a3.25 3.25 0 0 1-.22-6.493"/><path fill="url(#SVGlgk3ddjV)" fill-opacity=".3" d="M7.5 9.75a3.25 3.25 0 1 1-6.5 0a3.25 3.25 0 0 1 6.5 0"/><path fill="url(#SVGyQ5vUbKk)" fill-opacity=".3" d="M8 11a4 4 0 1 0-3.97-4.493q.11-.007.22-.007a3.25 3.25 0 0 1 3.027 4.435Q7.63 11 8 11"/><path fill="url(#SVG532qMd7T)" d="M8 11a4 4 0 1 0-3.97-4.493q.11-.007.22-.007a3.25 3.25 0 0 1 3.027 4.435Q7.63 11 8 11"/><path fill="url(#SVGwlw64dEb)" fill-opacity=".5" d="M4.03 6.507a4 4 0 0 1 7.94 0A3.25 3.25 0 0 1 11.75 13h-7.5a3.25 3.25 0 0 1-.22-6.493"/><path fill="url(#SVG05EOIb7t)" fill-opacity=".95" d="M7 6a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zM4 9.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5M9.5 9a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1z"/><defs><linearGradient id="SVGh3nO6cEW" x1="1.5" x2="7.948" y1="4.875" y2="14.254" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGlgk3ddjV" x1="1" x2="5.382" y1="7.613" y2="11.492" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fcfcfc" stop-opacity="0"/></linearGradient><linearGradient id="SVGyQ5vUbKk" x1="5.412" x2="6.47" y1="3.45" y2="8.965" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fcfcfc" stop-opacity="0"/></linearGradient><linearGradient id="SVG05EOIb7t" x1="14.667" x2="9.257" y1="12.667" y2="1.132" gradientUnits="userSpaceOnUse"><stop stop-color="#b3e0ff"/><stop offset="1" stop-color="#fff"/></linearGradient><radialGradient id="SVG532qMd7T" cx="0" cy="0" r="1" gradientTransform="matrix(4.49228 -1.9 1.69846 4.01577 4.342 9.55)" gradientUnits="userSpaceOnUse"><stop offset=".412" stop-color="#2c87f5"/><stop offset="1" stop-color="#2c87f5" stop-opacity="0"/></radialGradient><radialGradient id="SVGwlw64dEb" cx="0" cy="0" r="1" gradientTransform="rotate(64.034 1.81 7.118)scale(12.3236 87.8769)" 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 FluentColorCloudWords16(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGh3nO6cEW)" d="M4.03 6.507a4 4 0 0 1 7.94 0A3.25 3.25 0 0 1 11.75 13h-7.5a3.25 3.25 0 0 1-.22-6.493"/><path fill="url(#SVGlgk3ddjV)" fillOpacity=".3" d="M7.5 9.75a3.25 3.25 0 1 1-6.5 0a3.25 3.25 0 0 1 6.5 0"/><path fill="url(#SVGyQ5vUbKk)" fillOpacity=".3" d="M8 11a4 4 0 1 0-3.97-4.493q.11-.007.22-.007a3.25 3.25 0 0 1 3.027 4.435Q7.63 11 8 11"/><path fill="url(#SVG532qMd7T)" d="M8 11a4 4 0 1 0-3.97-4.493q.11-.007.22-.007a3.25 3.25 0 0 1 3.027 4.435Q7.63 11 8 11"/><path fill="url(#SVGwlw64dEb)" fillOpacity=".5" d="M4.03 6.507a4 4 0 0 1 7.94 0A3.25 3.25 0 0 1 11.75 13h-7.5a3.25 3.25 0 0 1-.22-6.493"/><path fill="url(#SVG05EOIb7t)" fillOpacity=".95" d="M7 6a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zM4 9.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5M9.5 9a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1z"/><defs><linearGradient id="SVGh3nO6cEW" x1="1.5" x2="7.948" y1="4.875" y2="14.254" gradientUnits="userSpaceOnUse"><stop stopColor="#0fafff"/><stop offset="1" stopColor="#367af2"/></linearGradient><linearGradient id="SVGlgk3ddjV" x1="1" x2="5.382" y1="7.613" y2="11.492" gradientUnits="userSpaceOnUse"><stop stopColor="#fff"/><stop offset="1" stopColor="#fcfcfc" stopOpacity="0"/></linearGradient><linearGradient id="SVGyQ5vUbKk" x1="5.412" x2="6.47" y1="3.45" y2="8.965" gradientUnits="userSpaceOnUse"><stop stopColor="#fff"/><stop offset="1" stopColor="#fcfcfc" stopOpacity="0"/></linearGradient><linearGradient id="SVG05EOIb7t" x1="14.667" x2="9.257" y1="12.667" y2="1.132" gradientUnits="userSpaceOnUse"><stop stopColor="#b3e0ff"/><stop offset="1" stopColor="#fff"/></linearGradient><radialGradient id="SVG532qMd7T" cx="0" cy="0" r="1" gradientTransform="matrix(4.49228 -1.9 1.69846 4.01577 4.342 9.55)" gradientUnits="userSpaceOnUse"><stop offset=".412" stopColor="#2c87f5"/><stop offset="1" stopColor="#2c87f5" stopOpacity="0"/></radialGradient><radialGradient id="SVGwlw64dEb" cx="0" cy="0" r="1" gradientTransform="rotate(64.034 1.81 7.118)scale(12.3236 87.8769)" 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 16 16"><g fill="none"><path fill="url(#SVGh3nO6cEW)" d="M4.03 6.507a4 4 0 0 1 7.94 0A3.25 3.25 0 0 1 11.75 13h-7.5a3.25 3.25 0 0 1-.22-6.493"/><path fill="url(#SVGlgk3ddjV)" fill-opacity=".3" d="M7.5 9.75a3.25 3.25 0 1 1-6.5 0a3.25 3.25 0 0 1 6.5 0"/><path fill="url(#SVGyQ5vUbKk)" fill-opacity=".3" d="M8 11a4 4 0 1 0-3.97-4.493q.11-.007.22-.007a3.25 3.25 0 0 1 3.027 4.435Q7.63 11 8 11"/><path fill="url(#SVG532qMd7T)" d="M8 11a4 4 0 1 0-3.97-4.493q.11-.007.22-.007a3.25 3.25 0 0 1 3.027 4.435Q7.63 11 8 11"/><path fill="url(#SVGwlw64dEb)" fill-opacity=".5" d="M4.03 6.507a4 4 0 0 1 7.94 0A3.25 3.25 0 0 1 11.75 13h-7.5a3.25 3.25 0 0 1-.22-6.493"/><path fill="url(#SVG05EOIb7t)" fill-opacity=".95" d="M7 6a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zM4 9.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5M9.5 9a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1z"/><defs><linearGradient id="SVGh3nO6cEW" x1="1.5" x2="7.948" y1="4.875" y2="14.254" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGlgk3ddjV" x1="1" x2="5.382" y1="7.613" y2="11.492" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fcfcfc" stop-opacity="0"/></linearGradient><linearGradient id="SVGyQ5vUbKk" x1="5.412" x2="6.47" y1="3.45" y2="8.965" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fcfcfc" stop-opacity="0"/></linearGradient><linearGradient id="SVG05EOIb7t" x1="14.667" x2="9.257" y1="12.667" y2="1.132" gradientUnits="userSpaceOnUse"><stop stop-color="#b3e0ff"/><stop offset="1" stop-color="#fff"/></linearGradient><radialGradient id="SVG532qMd7T" cx="0" cy="0" r="1" gradientTransform="matrix(4.49228 -1.9 1.69846 4.01577 4.342 9.55)" gradientUnits="userSpaceOnUse"><stop offset=".412" stop-color="#2c87f5"/><stop offset="1" stop-color="#2c87f5" stop-opacity="0"/></radialGradient><radialGradient id="SVGwlw64dEb" cx="0" cy="0" r="1" gradientTransform="rotate(64.034 1.81 7.118)scale(12.3236 87.8769)" 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-16 {
  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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGh3nO6cEW)%22%20d%3D%22M4.03%206.507a4%204%200%200%201%207.94%200A3.25%203.25%200%200%201%2011.75%2013h-7.5a3.25%203.25%200%200%201-.22-6.493%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGlgk3ddjV)%22%20fill-opacity%3D%22.3%22%20d%3D%22M7.5%209.75a3.25%203.25%200%201%201-6.5%200a3.25%203.25%200%200%201%206.5%200%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGyQ5vUbKk)%22%20fill-opacity%3D%22.3%22%20d%3D%22M8%2011a4%204%200%201%200-3.97-4.493q.11-.007.22-.007a3.25%203.25%200%200%201%203.027%204.435Q7.63%2011%208%2011%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG532qMd7T)%22%20d%3D%22M8%2011a4%204%200%201%200-3.97-4.493q.11-.007.22-.007a3.25%203.25%200%200%201%203.027%204.435Q7.63%2011%208%2011%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGwlw64dEb)%22%20fill-opacity%3D%22.5%22%20d%3D%22M4.03%206.507a4%204%200%200%201%207.94%200A3.25%203.25%200%200%201%2011.75%2013h-7.5a3.25%203.25%200%200%201-.22-6.493%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG05EOIb7t)%22%20fill-opacity%3D%22.95%22%20d%3D%22M7%206a.5.5%200%200%200%200%201h2a.5.5%200%200%200%200-1zM4%209.5a.5.5%200%200%201%20.5-.5h2a.5.5%200%200%201%200%201h-2a.5.5%200%200%201-.5-.5M9.5%209a.5.5%200%200%200%200%201h2a.5.5%200%200%200%200-1z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGh3nO6cEW%22%20x1%3D%221.5%22%20x2%3D%227.948%22%20y1%3D%224.875%22%20y2%3D%2214.254%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%22SVGlgk3ddjV%22%20x1%3D%221%22%20x2%3D%225.382%22%20y1%3D%227.613%22%20y2%3D%2211.492%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%22SVGyQ5vUbKk%22%20x1%3D%225.412%22%20x2%3D%226.47%22%20y1%3D%223.45%22%20y2%3D%228.965%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%22SVG05EOIb7t%22%20x1%3D%2214.667%22%20x2%3D%229.257%22%20y1%3D%2212.667%22%20y2%3D%221.132%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%22SVG532qMd7T%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(4.49228%20-1.9%201.69846%204.01577%204.342%209.55)%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%22SVGwlw64dEb%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(64.034%201.81%207.118)scale(12.3236%2087.8769)%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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGh3nO6cEW)%22%20d%3D%22M4.03%206.507a4%204%200%200%201%207.94%200A3.25%203.25%200%200%201%2011.75%2013h-7.5a3.25%203.25%200%200%201-.22-6.493%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGlgk3ddjV)%22%20fill-opacity%3D%22.3%22%20d%3D%22M7.5%209.75a3.25%203.25%200%201%201-6.5%200a3.25%203.25%200%200%201%206.5%200%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGyQ5vUbKk)%22%20fill-opacity%3D%22.3%22%20d%3D%22M8%2011a4%204%200%201%200-3.97-4.493q.11-.007.22-.007a3.25%203.25%200%200%201%203.027%204.435Q7.63%2011%208%2011%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG532qMd7T)%22%20d%3D%22M8%2011a4%204%200%201%200-3.97-4.493q.11-.007.22-.007a3.25%203.25%200%200%201%203.027%204.435Q7.63%2011%208%2011%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGwlw64dEb)%22%20fill-opacity%3D%22.5%22%20d%3D%22M4.03%206.507a4%204%200%200%201%207.94%200A3.25%203.25%200%200%201%2011.75%2013h-7.5a3.25%203.25%200%200%201-.22-6.493%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG05EOIb7t)%22%20fill-opacity%3D%22.95%22%20d%3D%22M7%206a.5.5%200%200%200%200%201h2a.5.5%200%200%200%200-1zM4%209.5a.5.5%200%200%201%20.5-.5h2a.5.5%200%200%201%200%201h-2a.5.5%200%200%201-.5-.5M9.5%209a.5.5%200%200%200%200%201h2a.5.5%200%200%200%200-1z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGh3nO6cEW%22%20x1%3D%221.5%22%20x2%3D%227.948%22%20y1%3D%224.875%22%20y2%3D%2214.254%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%22SVGlgk3ddjV%22%20x1%3D%221%22%20x2%3D%225.382%22%20y1%3D%227.613%22%20y2%3D%2211.492%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%22SVGyQ5vUbKk%22%20x1%3D%225.412%22%20x2%3D%226.47%22%20y1%3D%223.45%22%20y2%3D%228.965%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%22SVG05EOIb7t%22%20x1%3D%2214.667%22%20x2%3D%229.257%22%20y1%3D%2212.667%22%20y2%3D%221.132%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%22SVG532qMd7T%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(4.49228%20-1.9%201.69846%204.01577%204.342%209.55)%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%22SVGwlw64dEb%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(64.034%201.81%207.118)scale(12.3236%2087.8769)%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-16.svg?color=%231a73e8&size=48