# word-cloud icon Word cloud. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/word-cloud - Category: Charts & data - Use it for: word cloud, tag cloud - Tags: word-cloud, tag-cloud, words, keywords, text, frequency, survey, cloud - Component name: WordCloudIcon - Added: 2026-10-16 ## Don't confuse with - `cloud`: weather or cloud storage (cloud) ## Files Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. - line-round: https://gentleface.com/svg/line-round/16/word-cloud.svg · PNG https://gentleface.com/png/line-round/16/word-cloud.png · https://gentleface.com/png/line-round/32/word-cloud.png · https://gentleface.com/png/line-round/48/word-cloud.png - line-soft: https://gentleface.com/svg/line-soft/16/word-cloud.svg · PNG https://gentleface.com/png/line-soft/16/word-cloud.png · https://gentleface.com/png/line-soft/32/word-cloud.png · https://gentleface.com/png/line-soft/48/word-cloud.png - line-sharp: https://gentleface.com/svg/line-sharp/16/word-cloud.svg · PNG https://gentleface.com/png/line-sharp/16/word-cloud.png · https://gentleface.com/png/line-sharp/32/word-cloud.png · https://gentleface.com/png/line-sharp/48/word-cloud.png - solid-round: https://gentleface.com/svg/solid-round/16/word-cloud.svg · PNG https://gentleface.com/png/solid-round/16/word-cloud.png · https://gentleface.com/png/solid-round/32/word-cloud.png · https://gentleface.com/png/solid-round/48/word-cloud.png - solid-soft: https://gentleface.com/svg/solid-soft/16/word-cloud.svg · PNG https://gentleface.com/png/solid-soft/16/word-cloud.png · https://gentleface.com/png/solid-soft/32/word-cloud.png · https://gentleface.com/png/solid-soft/48/word-cloud.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/word-cloud.svg · PNG https://gentleface.com/png/solid-sharp/16/word-cloud.png · https://gentleface.com/png/solid-sharp/32/word-cloud.png · https://gentleface.com/png/solid-sharp/48/word-cloud.png The SVG of every style: https://gentleface.com/icons/word-cloud.json (`svg`). ## Code (line-round) The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "word-cloud" (line-round), MIT. https://gentleface.com/icons/word-cloud import type { SVGProps } from 'react'; export function WordCloudIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "word-cloud" (line-round), MIT. https://gentleface.com/icons/word-cloud. Takes the text color. */ .icon-word-cloud { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M2.464 11.536C1.976 11.047 1.605 10.482 1.351 9.84C1.117 9.249 1 8.636 1 8C1 7.364 1.117 6.751 1.351 6.16C1.605 5.518 1.976 4.953 2.464 4.464C2.953 3.976 3.518 3.605 4.16 3.351C4.751 3.117 5.364 3 6 3C6.636 3 7.249 3.117 7.84 3.351C8.482 3.605 9.047 3.976 9.536 4.464C10.024 4.953 10.395 5.518 10.649 6.16C10.783 6.497 10.878 6.842 10.935 7.194C11.088 7.137 11.245 7.092 11.409 7.059C11.911 6.958 12.406 6.984 12.895 7.136C13.383 7.289 13.805 7.55 14.16 7.918C14.474 8.244 14.703 8.622 14.846 9.051C14.989 9.481 15.033 9.92 14.977 10.369C14.914 10.877 14.733 11.339 14.434 11.754C14.134 12.169 13.754 12.487 13.292 12.708C12.883 12.903 12.453 13 12 13L6 13C5.364 13 4.751 12.883 4.16 12.649C3.518 12.395 2.953 12.024 2.464 11.536ZM12.861 11.805C13.169 11.658 13.423 11.446 13.622 11.169C13.822 10.893 13.943 10.585 13.985 10.246C14.022 9.947 13.993 9.654 13.897 9.368C13.802 9.081 13.65 8.83 13.44 8.612C13.203 8.366 12.922 8.193 12.596 8.091C12.271 7.989 11.94 7.972 11.606 8.039C11.31 8.099 11.041 8.219 10.8 8.4C10.711 8.467 10.611 8.5 10.5 8.5C10.359 8.5 10.241 8.452 10.144 8.356C10.048 8.259 10 8.141 10 8C10 7.491 9.906 7.001 9.719 6.528C9.516 6.014 9.219 5.562 8.828 5.172C8.438 4.781 7.986 4.484 7.472 4.281C6.999 4.094 6.509 4 6 4C5.491 4 5.001 4.094 4.528 4.281C4.014 4.484 3.562 4.781 3.172 5.172C2.781 5.562 2.484 6.014 2.281 6.528C2.094 7.001 2 7.491 2 8C2 8.509 2.094 8.999 2.281 9.472C2.484 9.986 2.781 10.438 3.172 10.828C3.562 11.219 4.014 11.516 4.528 11.719C5.001 11.906 5.491 12 6 12L12 12C12.302 12 12.589 11.935 12.861 11.805ZM7 6L7 7L4 7L4 6L7 6ZM8 10L4 10L4 9.501L4 9.5L4 8L8 8L8 10ZM12 11L9 11L9 10L12 10L12 11Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M2.464 11.536C1.976 11.047 1.605 10.482 1.351 9.84C1.117 9.249 1 8.636 1 8C1 7.364 1.117 6.751 1.351 6.16C1.605 5.518 1.976 4.953 2.464 4.464C2.953 3.976 3.518 3.605 4.16 3.351C4.751 3.117 5.364 3 6 3C6.636 3 7.249 3.117 7.84 3.351C8.482 3.605 9.047 3.976 9.536 4.464C10.024 4.953 10.395 5.518 10.649 6.16C10.783 6.497 10.878 6.842 10.935 7.194C11.088 7.137 11.245 7.092 11.409 7.059C11.911 6.958 12.406 6.984 12.895 7.136C13.383 7.289 13.805 7.55 14.16 7.918C14.474 8.244 14.703 8.622 14.846 9.051C14.989 9.481 15.033 9.92 14.977 10.369C14.914 10.877 14.733 11.339 14.434 11.754C14.134 12.169 13.754 12.487 13.292 12.708C12.883 12.903 12.453 13 12 13L6 13C5.364 13 4.751 12.883 4.16 12.649C3.518 12.395 2.953 12.024 2.464 11.536ZM12.861 11.805C13.169 11.658 13.423 11.446 13.622 11.169C13.822 10.893 13.943 10.585 13.985 10.246C14.022 9.947 13.993 9.654 13.897 9.368C13.802 9.081 13.65 8.83 13.44 8.612C13.203 8.366 12.922 8.193 12.596 8.091C12.271 7.989 11.94 7.972 11.606 8.039C11.31 8.099 11.041 8.219 10.8 8.4C10.711 8.467 10.611 8.5 10.5 8.5C10.359 8.5 10.241 8.452 10.144 8.356C10.048 8.259 10 8.141 10 8C10 7.491 9.906 7.001 9.719 6.528C9.516 6.014 9.219 5.562 8.828 5.172C8.438 4.781 7.986 4.484 7.472 4.281C6.999 4.094 6.509 4 6 4C5.491 4 5.001 4.094 4.528 4.281C4.014 4.484 3.562 4.781 3.172 5.172C2.781 5.562 2.484 6.014 2.281 6.528C2.094 7.001 2 7.491 2 8C2 8.509 2.094 8.999 2.281 9.472C2.484 9.986 2.781 10.438 3.172 10.828C3.562 11.219 4.014 11.516 4.528 11.719C5.001 11.906 5.491 12 6 12L12 12C12.302 12 12.589 11.935 12.861 11.805ZM7 6L7 7L4 7L4 6L7 6ZM8 10L4 10L4 9.501L4 9.5L4 8L8 8L8 10ZM12 11L9 11L9 10L12 10L12 11Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M2.464 11.536C1.976 11.047 1.605 10.482 1.351 9.84C1.117 9.249 1 8.636 1 8C1 7.364 1.117 6.751 1.351 6.16C1.605 5.518 1.976 4.953 2.464 4.464C2.953 3.976 3.518 3.605 4.16 3.351C4.751 3.117 5.364 3 6 3C6.636 3 7.249 3.117 7.84 3.351C8.482 3.605 9.047 3.976 9.536 4.464C10.024 4.953 10.395 5.518 10.649 6.16C10.783 6.497 10.878 6.842 10.935 7.194C11.088 7.137 11.245 7.092 11.409 7.059C11.911 6.958 12.406 6.984 12.895 7.136C13.383 7.289 13.805 7.55 14.16 7.918C14.474 8.244 14.703 8.622 14.846 9.051C14.989 9.481 15.033 9.92 14.977 10.369C14.914 10.877 14.733 11.339 14.434 11.754C14.134 12.169 13.754 12.487 13.292 12.708C12.883 12.903 12.453 13 12 13L6 13C5.364 13 4.751 12.883 4.16 12.649C3.518 12.395 2.953 12.024 2.464 11.536ZM12.861 11.805C13.169 11.658 13.423 11.446 13.622 11.169C13.822 10.893 13.943 10.585 13.985 10.246C14.022 9.947 13.993 9.654 13.897 9.368C13.802 9.081 13.65 8.83 13.44 8.612C13.203 8.366 12.922 8.193 12.596 8.091C12.271 7.989 11.94 7.972 11.606 8.039C11.31 8.099 11.041 8.219 10.8 8.4C10.711 8.467 10.611 8.5 10.5 8.5C10.359 8.5 10.241 8.452 10.144 8.356C10.048 8.259 10 8.141 10 8C10 7.491 9.906 7.001 9.719 6.528C9.516 6.014 9.219 5.562 8.828 5.172C8.438 4.781 7.986 4.484 7.472 4.281C6.999 4.094 6.509 4 6 4C5.491 4 5.001 4.094 4.528 4.281C4.014 4.484 3.562 4.781 3.172 5.172C2.781 5.562 2.484 6.014 2.281 6.528C2.094 7.001 2 7.491 2 8C2 8.509 2.094 8.999 2.281 9.472C2.484 9.986 2.781 10.438 3.172 10.828C3.562 11.219 4.014 11.516 4.528 11.719C5.001 11.906 5.491 12 6 12L12 12C12.302 12 12.589 11.935 12.861 11.805ZM7 6L7 7L4 7L4 6L7 6ZM8 10L4 10L4 9.501L4 9.5L4 8L8 8L8 10ZM12 11L9 11L9 10L12 10L12 11Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "word-cloud" (line-round), MIT. https://gentleface.com/icons/word-cloud import SwiftUI struct WordCloudIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 2.464, y: 11.536)) p.addCurve(to: CGPoint(x: 1.351, y: 9.84), control1: CGPoint(x: 1.976, y: 11.047), control2: CGPoint(x: 1.605, y: 10.482)) p.addCurve(to: CGPoint(x: 1, y: 8), control1: CGPoint(x: 1.117, y: 9.249), control2: CGPoint(x: 1, y: 8.636)) p.addCurve(to: CGPoint(x: 1.351, y: 6.16), control1: CGPoint(x: 1, y: 7.364), control2: CGPoint(x: 1.117, y: 6.751)) p.addCurve(to: CGPoint(x: 2.464, y: 4.464), control1: CGPoint(x: 1.605, y: 5.518), control2: CGPoint(x: 1.976, y: 4.953)) p.addCurve(to: CGPoint(x: 4.16, y: 3.351), control1: CGPoint(x: 2.953, y: 3.976), control2: CGPoint(x: 3.518, y: 3.605)) p.addCurve(to: CGPoint(x: 6, y: 3), control1: CGPoint(x: 4.751, y: 3.117), control2: CGPoint(x: 5.364, y: 3)) p.addCurve(to: CGPoint(x: 7.84, y: 3.351), control1: CGPoint(x: 6.636, y: 3), control2: CGPoint(x: 7.249, y: 3.117)) p.addCurve(to: CGPoint(x: 9.536, y: 4.464), control1: CGPoint(x: 8.482, y: 3.605), control2: CGPoint(x: 9.047, y: 3.976)) p.addCurve(to: CGPoint(x: 10.649, y: 6.16), control1: CGPoint(x: 10.024, y: 4.953), control2: CGPoint(x: 10.395, y: 5.518)) p.addCurve(to: CGPoint(x: 10.935, y: 7.194), control1: CGPoint(x: 10.783, y: 6.497), control2: CGPoint(x: 10.878, y: 6.842)) p.addCurve(to: CGPoint(x: 11.409, y: 7.059), control1: CGPoint(x: 11.088, y: 7.137), control2: CGPoint(x: 11.245, y: 7.092)) p.addCurve(to: CGPoint(x: 12.895, y: 7.136), control1: CGPoint(x: 11.911, y: 6.958), control2: CGPoint(x: 12.406, y: 6.984)) p.addCurve(to: CGPoint(x: 14.16, y: 7.918), control1: CGPoint(x: 13.383, y: 7.289), control2: CGPoint(x: 13.805, y: 7.55)) p.addCurve(to: CGPoint(x: 14.846, y: 9.051), control1: CGPoint(x: 14.474, y: 8.244), control2: CGPoint(x: 14.703, y: 8.622)) p.addCurve(to: CGPoint(x: 14.977, y: 10.369), control1: CGPoint(x: 14.989, y: 9.481), control2: CGPoint(x: 15.033, y: 9.92)) p.addCurve(to: CGPoint(x: 14.434, y: 11.754), control1: CGPoint(x: 14.914, y: 10.877), control2: CGPoint(x: 14.733, y: 11.339)) p.addCurve(to: CGPoint(x: 13.292, y: 12.708), control1: CGPoint(x: 14.134, y: 12.169), control2: CGPoint(x: 13.754, y: 12.487)) p.addCurve(to: CGPoint(x: 12, y: 13), control1: CGPoint(x: 12.883, y: 12.903), control2: CGPoint(x: 12.453, y: 13)) p.addLine(to: CGPoint(x: 6, y: 13)) p.addCurve(to: CGPoint(x: 4.16, y: 12.649), control1: CGPoint(x: 5.364, y: 13), control2: CGPoint(x: 4.751, y: 12.883)) p.addCurve(to: CGPoint(x: 2.464, y: 11.536), control1: CGPoint(x: 3.518, y: 12.395), control2: CGPoint(x: 2.953, y: 12.024)) p.closeSubpath() p.move(to: CGPoint(x: 12.861, y: 11.805)) p.addCurve(to: CGPoint(x: 13.622, y: 11.169), control1: CGPoint(x: 13.169, y: 11.658), control2: CGPoint(x: 13.423, y: 11.446)) p.addCurve(to: CGPoint(x: 13.985, y: 10.246), control1: CGPoint(x: 13.822, y: 10.893), control2: CGPoint(x: 13.943, y: 10.585)) p.addCurve(to: CGPoint(x: 13.897, y: 9.368), control1: CGPoint(x: 14.022, y: 9.947), control2: CGPoint(x: 13.993, y: 9.654)) p.addCurve(to: CGPoint(x: 13.44, y: 8.612), control1: CGPoint(x: 13.802, y: 9.081), control2: CGPoint(x: 13.65, y: 8.83)) p.addCurve(to: CGPoint(x: 12.596, y: 8.091), control1: CGPoint(x: 13.203, y: 8.366), control2: CGPoint(x: 12.922, y: 8.193)) p.addCurve(to: CGPoint(x: 11.606, y: 8.039), control1: CGPoint(x: 12.271, y: 7.989), control2: CGPoint(x: 11.94, y: 7.972)) p.addCurve(to: CGPoint(x: 10.8, y: 8.4), control1: CGPoint(x: 11.31, y: 8.099), control2: CGPoint(x: 11.041, y: 8.219)) p.addCurve(to: CGPoint(x: 10.5, y: 8.5), control1: CGPoint(x: 10.711, y: 8.467), control2: CGPoint(x: 10.611, y: 8.5)) p.addCurve(to: CGPoint(x: 10.144, y: 8.356), control1: CGPoint(x: 10.359, y: 8.5), control2: CGPoint(x: 10.241, y: 8.452)) p.addCurve(to: CGPoint(x: 10, y: 8), control1: CGPoint(x: 10.048, y: 8.259), control2: CGPoint(x: 10, y: 8.141)) p.addCurve(to: CGPoint(x: 9.719, y: 6.528), control1: CGPoint(x: 10, y: 7.491), control2: CGPoint(x: 9.906, y: 7.001)) p.addCurve(to: CGPoint(x: 8.828, y: 5.172), control1: CGPoint(x: 9.516, y: 6.014), control2: CGPoint(x: 9.219, y: 5.562)) p.addCurve(to: CGPoint(x: 7.472, y: 4.281), control1: CGPoint(x: 8.438, y: 4.781), control2: CGPoint(x: 7.986, y: 4.484)) p.addCurve(to: CGPoint(x: 6, y: 4), control1: CGPoint(x: 6.999, y: 4.094), control2: CGPoint(x: 6.509, y: 4)) p.addCurve(to: CGPoint(x: 4.528, y: 4.281), control1: CGPoint(x: 5.491, y: 4), control2: CGPoint(x: 5.001, y: 4.094)) p.addCurve(to: CGPoint(x: 3.172, y: 5.172), control1: CGPoint(x: 4.014, y: 4.484), control2: CGPoint(x: 3.562, y: 4.781)) p.addCurve(to: CGPoint(x: 2.281, y: 6.528), control1: CGPoint(x: 2.781, y: 5.562), control2: CGPoint(x: 2.484, y: 6.014)) p.addCurve(to: CGPoint(x: 2, y: 8), control1: CGPoint(x: 2.094, y: 7.001), control2: CGPoint(x: 2, y: 7.491)) p.addCurve(to: CGPoint(x: 2.281, y: 9.472), control1: CGPoint(x: 2, y: 8.509), control2: CGPoint(x: 2.094, y: 8.999)) p.addCurve(to: CGPoint(x: 3.172, y: 10.828), control1: CGPoint(x: 2.484, y: 9.986), control2: CGPoint(x: 2.781, y: 10.438)) p.addCurve(to: CGPoint(x: 4.528, y: 11.719), control1: CGPoint(x: 3.562, y: 11.219), control2: CGPoint(x: 4.014, y: 11.516)) p.addCurve(to: CGPoint(x: 6, y: 12), control1: CGPoint(x: 5.001, y: 11.906), control2: CGPoint(x: 5.491, y: 12)) p.addLine(to: CGPoint(x: 12, y: 12)) p.addCurve(to: CGPoint(x: 12.861, y: 11.805), control1: CGPoint(x: 12.302, y: 12), control2: CGPoint(x: 12.589, y: 11.935)) p.closeSubpath() p.move(to: CGPoint(x: 7, y: 6)) p.addLine(to: CGPoint(x: 7, y: 7)) p.addLine(to: CGPoint(x: 4, y: 7)) p.addLine(to: CGPoint(x: 4, y: 6)) p.addLine(to: CGPoint(x: 7, y: 6)) p.closeSubpath() p.move(to: CGPoint(x: 8, y: 10)) p.addLine(to: CGPoint(x: 4, y: 10)) p.addLine(to: CGPoint(x: 4, y: 9.501)) p.addLine(to: CGPoint(x: 4, y: 9.5)) p.addLine(to: CGPoint(x: 4, y: 8)) p.addLine(to: CGPoint(x: 8, y: 8)) p.addLine(to: CGPoint(x: 8, y: 10)) p.closeSubpath() p.move(to: CGPoint(x: 12, y: 11)) p.addLine(to: CGPoint(x: 9, y: 11)) p.addLine(to: CGPoint(x: 9, y: 10)) p.addLine(to: CGPoint(x: 12, y: 10)) p.addLine(to: CGPoint(x: 12, y: 11)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // WordCloudIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "word-cloud" (line-round), MIT. https://gentleface.com/icons/word-cloud import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val WordCloudIcon: ImageVector by lazy { ImageVector.Builder( name = "word-cloud", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M2.464 11.536C1.976 11.047 1.605 10.482 1.351 9.84C1.117 9.249 1 8.636 1 8C1 7.364 1.117 6.751 1.351 6.16C1.605 5.518 1.976 4.953 2.464 4.464C2.953 3.976 3.518 3.605 4.16 3.351C4.751 3.117 5.364 3 6 3C6.636 3 7.249 3.117 7.84 3.351C8.482 3.605 9.047 3.976 9.536 4.464C10.024 4.953 10.395 5.518 10.649 6.16C10.783 6.497 10.878 6.842 10.935 7.194C11.088 7.137 11.245 7.092 11.409 7.059C11.911 6.958 12.406 6.984 12.895 7.136C13.383 7.289 13.805 7.55 14.16 7.918C14.474 8.244 14.703 8.622 14.846 9.051C14.989 9.481 15.033 9.92 14.977 10.369C14.914 10.877 14.733 11.339 14.434 11.754C14.134 12.169 13.754 12.487 13.292 12.708C12.883 12.903 12.453 13 12 13L6 13C5.364 13 4.751 12.883 4.16 12.649C3.518 12.395 2.953 12.024 2.464 11.536ZM12.861 11.805C13.169 11.658 13.423 11.446 13.622 11.169C13.822 10.893 13.943 10.585 13.985 10.246C14.022 9.947 13.993 9.654 13.897 9.368C13.802 9.081 13.65 8.83 13.44 8.612C13.203 8.366 12.922 8.193 12.596 8.091C12.271 7.989 11.94 7.972 11.606 8.039C11.31 8.099 11.041 8.219 10.8 8.4C10.711 8.467 10.611 8.5 10.5 8.5C10.359 8.5 10.241 8.452 10.144 8.356C10.048 8.259 10 8.141 10 8C10 7.491 9.906 7.001 9.719 6.528C9.516 6.014 9.219 5.562 8.828 5.172C8.438 4.781 7.986 4.484 7.472 4.281C6.999 4.094 6.509 4 6 4C5.491 4 5.001 4.094 4.528 4.281C4.014 4.484 3.562 4.781 3.172 5.172C2.781 5.562 2.484 6.014 2.281 6.528C2.094 7.001 2 7.491 2 8C2 8.509 2.094 8.999 2.281 9.472C2.484 9.986 2.781 10.438 3.172 10.828C3.562 11.219 4.014 11.516 4.528 11.719C5.001 11.906 5.491 12 6 12L12 12C12.302 12 12.589 11.935 12.861 11.805ZM7 6L7 7L4 7L4 6L7 6ZM8 10L4 10L4 9.501L4 9.5L4 8L8 8L8 10ZM12 11L9 11L9 10L12 10L12 11Z"), fill = SolidColor(Color.Black), ).build() } // Icon(WordCloudIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "word-cloud" (line-round), MIT. https://gentleface.com/icons/word-cloud import 'package:flutter/widgets.dart'; class WordCloudIcon extends StatelessWidget { const WordCloudIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _WordCloudIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _WordCloudIconPainter extends CustomPainter { _WordCloudIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(2.464, 11.536) ..cubicTo(1.976, 11.047, 1.605, 10.482, 1.351, 9.84) ..cubicTo(1.117, 9.249, 1, 8.636, 1, 8) ..cubicTo(1, 7.364, 1.117, 6.751, 1.351, 6.16) ..cubicTo(1.605, 5.518, 1.976, 4.953, 2.464, 4.464) ..cubicTo(2.953, 3.976, 3.518, 3.605, 4.16, 3.351) ..cubicTo(4.751, 3.117, 5.364, 3, 6, 3) ..cubicTo(6.636, 3, 7.249, 3.117, 7.84, 3.351) ..cubicTo(8.482, 3.605, 9.047, 3.976, 9.536, 4.464) ..cubicTo(10.024, 4.953, 10.395, 5.518, 10.649, 6.16) ..cubicTo(10.783, 6.497, 10.878, 6.842, 10.935, 7.194) ..cubicTo(11.088, 7.137, 11.245, 7.092, 11.409, 7.059) ..cubicTo(11.911, 6.958, 12.406, 6.984, 12.895, 7.136) ..cubicTo(13.383, 7.289, 13.805, 7.55, 14.16, 7.918) ..cubicTo(14.474, 8.244, 14.703, 8.622, 14.846, 9.051) ..cubicTo(14.989, 9.481, 15.033, 9.92, 14.977, 10.369) ..cubicTo(14.914, 10.877, 14.733, 11.339, 14.434, 11.754) ..cubicTo(14.134, 12.169, 13.754, 12.487, 13.292, 12.708) ..cubicTo(12.883, 12.903, 12.453, 13, 12, 13) ..lineTo(6, 13) ..cubicTo(5.364, 13, 4.751, 12.883, 4.16, 12.649) ..cubicTo(3.518, 12.395, 2.953, 12.024, 2.464, 11.536) ..close() ..moveTo(12.861, 11.805) ..cubicTo(13.169, 11.658, 13.423, 11.446, 13.622, 11.169) ..cubicTo(13.822, 10.893, 13.943, 10.585, 13.985, 10.246) ..cubicTo(14.022, 9.947, 13.993, 9.654, 13.897, 9.368) ..cubicTo(13.802, 9.081, 13.65, 8.83, 13.44, 8.612) ..cubicTo(13.203, 8.366, 12.922, 8.193, 12.596, 8.091) ..cubicTo(12.271, 7.989, 11.94, 7.972, 11.606, 8.039) ..cubicTo(11.31, 8.099, 11.041, 8.219, 10.8, 8.4) ..cubicTo(10.711, 8.467, 10.611, 8.5, 10.5, 8.5) ..cubicTo(10.359, 8.5, 10.241, 8.452, 10.144, 8.356) ..cubicTo(10.048, 8.259, 10, 8.141, 10, 8) ..cubicTo(10, 7.491, 9.906, 7.001, 9.719, 6.528) ..cubicTo(9.516, 6.014, 9.219, 5.562, 8.828, 5.172) ..cubicTo(8.438, 4.781, 7.986, 4.484, 7.472, 4.281) ..cubicTo(6.999, 4.094, 6.509, 4, 6, 4) ..cubicTo(5.491, 4, 5.001, 4.094, 4.528, 4.281) ..cubicTo(4.014, 4.484, 3.562, 4.781, 3.172, 5.172) ..cubicTo(2.781, 5.562, 2.484, 6.014, 2.281, 6.528) ..cubicTo(2.094, 7.001, 2, 7.491, 2, 8) ..cubicTo(2, 8.509, 2.094, 8.999, 2.281, 9.472) ..cubicTo(2.484, 9.986, 2.781, 10.438, 3.172, 10.828) ..cubicTo(3.562, 11.219, 4.014, 11.516, 4.528, 11.719) ..cubicTo(5.001, 11.906, 5.491, 12, 6, 12) ..lineTo(12, 12) ..cubicTo(12.302, 12, 12.589, 11.935, 12.861, 11.805) ..close() ..moveTo(7, 6) ..lineTo(7, 7) ..lineTo(4, 7) ..lineTo(4, 6) ..lineTo(7, 6) ..close() ..moveTo(8, 10) ..lineTo(4, 10) ..lineTo(4, 9.501) ..lineTo(4, 9.5) ..lineTo(4, 8) ..lineTo(8, 8) ..lineTo(8, 10) ..close() ..moveTo(12, 11) ..lineTo(9, 11) ..lineTo(9, 10) ..lineTo(12, 10) ..lineTo(12, 11) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_WordCloudIconPainter old) => old.color != color; } ```