news icon

news-20 from Fluent UI System Color Icons by Microsoft Corporation · 20 · MIT Free for personal and commercial use.

Name: news-20
Set: Fluent UI System Color Icons
Style: 20
Viewbox: 20×20
License: MIT

3 other variants in Fluent UI System Color Icons

The same icon in other sets

newsBoxIcons v2 newsBoxIcons v2 Solid news-16-filledFluent UI System Icons newsHuge Icons newsMaterial Symbols newsMaterial Symbols Light news-fillMingCute Icon news-fillRemix Icon newsTabler Icons

Use the news icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGxLE1RcMN)" d="M16 6a2 2 0 0 1 2 2v5.5a2.5 2.5 0 0 1-2 2.45l-.5.05V6z"/><path fill="url(#SVG5qkZe11U)" d="M2 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10.95q-.243.05-.5.05h-11A2.5 2.5 0 0 1 2 13.5z"/><path fill="url(#SVGeZBFkdwi)" d="M2 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10.95q-.243.05-.5.05h-11A2.5 2.5 0 0 1 2 13.5z"/><path fill="url(#SVGODRgIcmc)" d="M2 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10.95q-.243.05-.5.05h-11A2.5 2.5 0 0 1 2 13.5z"/><path fill="url(#SVGALnUKeen)" d="M5.5 9a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/><path fill="url(#SVGTdtncbDr)" d="M10.5 9a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zm-.5 3.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/><path fill="url(#SVGpCIA3YiZ)" d="M5 6.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5"/><defs><linearGradient id="SVG5qkZe11U" x1="6" x2="16.578" y1="1" y2="15.055" gradientUnits="userSpaceOnUse"><stop stop-color="#3bd5ff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGeZBFkdwi" x1="10" x2="10" y1="13.5" y2="16" gradientUnits="userSpaceOnUse"><stop offset=".181" stop-color="#2764e7" stop-opacity="0"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="SVGODRgIcmc" x1="9.5" x2="14.399" y1="7" y2="19.652" gradientUnits="userSpaceOnUse"><stop stop-color="#dcf8ff" stop-opacity="0"/><stop offset="1" stop-color="#ff6ce8" stop-opacity=".7"/></linearGradient><linearGradient id="SVGALnUKeen" x1="5.382" x2="7.382" y1="8.804" y2="12.809" gradientUnits="userSpaceOnUse"><stop stop-color="#defcff"/><stop offset="1" stop-color="#9ff0f9"/></linearGradient><linearGradient id="SVGTdtncbDr" x1="10.262" x2="11.133" y1="9.07" y2="13.28" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient><linearGradient id="SVGpCIA3YiZ" x1="5.7" x2="5.721" y1="6.018" y2="7.115" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient><radialGradient id="SVGxLE1RcMN" cx="0" cy="0" r="1" gradientTransform="rotate(126.027 7.84 8.715)scale(6.80074 9.8598)" gradientUnits="userSpaceOnUse"><stop stop-color="#068beb"/><stop offset=".617" stop-color="#0056cf"/><stop offset=".974" stop-color="#0027a7"/></radialGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function FluentColorNews20(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGxLE1RcMN)" d="M16 6a2 2 0 0 1 2 2v5.5a2.5 2.5 0 0 1-2 2.45l-.5.05V6z"/><path fill="url(#SVG5qkZe11U)" d="M2 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10.95q-.243.05-.5.05h-11A2.5 2.5 0 0 1 2 13.5z"/><path fill="url(#SVGeZBFkdwi)" d="M2 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10.95q-.243.05-.5.05h-11A2.5 2.5 0 0 1 2 13.5z"/><path fill="url(#SVGODRgIcmc)" d="M2 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10.95q-.243.05-.5.05h-11A2.5 2.5 0 0 1 2 13.5z"/><path fill="url(#SVGALnUKeen)" d="M5.5 9a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/><path fill="url(#SVGTdtncbDr)" d="M10.5 9a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zm-.5 3.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/><path fill="url(#SVGpCIA3YiZ)" d="M5 6.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5"/><defs><linearGradient id="SVG5qkZe11U" x1="6" x2="16.578" y1="1" y2="15.055" gradientUnits="userSpaceOnUse"><stop stopColor="#3bd5ff"/><stop offset="1" stopColor="#367af2"/></linearGradient><linearGradient id="SVGeZBFkdwi" x1="10" x2="10" y1="13.5" y2="16" gradientUnits="userSpaceOnUse"><stop offset=".181" stopColor="#2764e7" stopOpacity="0"/><stop offset="1" stopColor="#2764e7"/></linearGradient><linearGradient id="SVGODRgIcmc" x1="9.5" x2="14.399" y1="7" y2="19.652" gradientUnits="userSpaceOnUse"><stop stopColor="#dcf8ff" stopOpacity="0"/><stop offset="1" stopColor="#ff6ce8" stopOpacity=".7"/></linearGradient><linearGradient id="SVGALnUKeen" x1="5.382" x2="7.382" y1="8.804" y2="12.809" gradientUnits="userSpaceOnUse"><stop stopColor="#defcff"/><stop offset="1" stopColor="#9ff0f9"/></linearGradient><linearGradient id="SVGTdtncbDr" x1="10.262" x2="11.133" y1="9.07" y2="13.28" gradientUnits="userSpaceOnUse"><stop stopColor="#fdfdfd"/><stop offset="1" stopColor="#cceaff"/></linearGradient><linearGradient id="SVGpCIA3YiZ" x1="5.7" x2="5.721" y1="6.018" y2="7.115" gradientUnits="userSpaceOnUse"><stop stopColor="#fdfdfd"/><stop offset="1" stopColor="#cceaff"/></linearGradient><radialGradient id="SVGxLE1RcMN" cx="0" cy="0" r="1" gradientTransform="rotate(126.027 7.84 8.715)scale(6.80074 9.8598)" gradientUnits="userSpaceOnUse"><stop stopColor="#068beb"/><stop offset=".617" stopColor="#0056cf"/><stop offset=".974" stopColor="#0027a7"/></radialGradient></defs></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGxLE1RcMN)" d="M16 6a2 2 0 0 1 2 2v5.5a2.5 2.5 0 0 1-2 2.45l-.5.05V6z"/><path fill="url(#SVG5qkZe11U)" d="M2 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10.95q-.243.05-.5.05h-11A2.5 2.5 0 0 1 2 13.5z"/><path fill="url(#SVGeZBFkdwi)" d="M2 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10.95q-.243.05-.5.05h-11A2.5 2.5 0 0 1 2 13.5z"/><path fill="url(#SVGODRgIcmc)" d="M2 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10.95q-.243.05-.5.05h-11A2.5 2.5 0 0 1 2 13.5z"/><path fill="url(#SVGALnUKeen)" d="M5.5 9a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/><path fill="url(#SVGTdtncbDr)" d="M10.5 9a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zm-.5 3.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/><path fill="url(#SVGpCIA3YiZ)" d="M5 6.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5"/><defs><linearGradient id="SVG5qkZe11U" x1="6" x2="16.578" y1="1" y2="15.055" gradientUnits="userSpaceOnUse"><stop stop-color="#3bd5ff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGeZBFkdwi" x1="10" x2="10" y1="13.5" y2="16" gradientUnits="userSpaceOnUse"><stop offset=".181" stop-color="#2764e7" stop-opacity="0"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="SVGODRgIcmc" x1="9.5" x2="14.399" y1="7" y2="19.652" gradientUnits="userSpaceOnUse"><stop stop-color="#dcf8ff" stop-opacity="0"/><stop offset="1" stop-color="#ff6ce8" stop-opacity=".7"/></linearGradient><linearGradient id="SVGALnUKeen" x1="5.382" x2="7.382" y1="8.804" y2="12.809" gradientUnits="userSpaceOnUse"><stop stop-color="#defcff"/><stop offset="1" stop-color="#9ff0f9"/></linearGradient><linearGradient id="SVGTdtncbDr" x1="10.262" x2="11.133" y1="9.07" y2="13.28" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient><linearGradient id="SVGpCIA3YiZ" x1="5.7" x2="5.721" y1="6.018" y2="7.115" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient><radialGradient id="SVGxLE1RcMN" cx="0" cy="0" r="1" gradientTransform="rotate(126.027 7.84 8.715)scale(6.80074 9.8598)" gradientUnits="userSpaceOnUse"><stop stop-color="#068beb"/><stop offset=".617" stop-color="#0056cf"/><stop offset=".974" stop-color="#0027a7"/></radialGradient></defs></g></svg>
</template>

CSS

.icon-news-20 {
  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%2020%2020%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGxLE1RcMN)%22%20d%3D%22M16%206a2%202%200%200%201%202%202v5.5a2.5%202.5%200%200%201-2%202.45l-.5.05V6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG5qkZe11U)%22%20d%3D%22M2%205a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v10.95q-.243.05-.5.05h-11A2.5%202.5%200%200%201%202%2013.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGeZBFkdwi)%22%20d%3D%22M2%205a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v10.95q-.243.05-.5.05h-11A2.5%202.5%200%200%201%202%2013.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGODRgIcmc)%22%20d%3D%22M2%205a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v10.95q-.243.05-.5.05h-11A2.5%202.5%200%200%201%202%2013.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGALnUKeen)%22%20d%3D%22M5.5%209a.5.5%200%200%200-.5.5v3a.5.5%200%200%200%20.5.5h3a.5.5%200%200%200%20.5-.5v-3a.5.5%200%200%200-.5-.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGTdtncbDr)%22%20d%3D%22M10.5%209a.5.5%200%200%200%200%201h2a.5.5%200%200%200%200-1zm-.5%203.5a.5.5%200%200%201%20.5-.5h2a.5.5%200%200%201%200%201h-2a.5.5%200%200%201-.5-.5%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGpCIA3YiZ)%22%20d%3D%22M5%206.5a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7a.5.5%200%200%201-.5-.5%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG5qkZe11U%22%20x1%3D%226%22%20x2%3D%2216.578%22%20y1%3D%221%22%20y2%3D%2215.055%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%233bd5ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23367af2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGeZBFkdwi%22%20x1%3D%2210%22%20x2%3D%2210%22%20y1%3D%2213.5%22%20y2%3D%2216%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.181%22%20stop-color%3D%22%232764e7%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232764e7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGODRgIcmc%22%20x1%3D%229.5%22%20x2%3D%2214.399%22%20y1%3D%227%22%20y2%3D%2219.652%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23dcf8ff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff6ce8%22%20stop-opacity%3D%22.7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGALnUKeen%22%20x1%3D%225.382%22%20x2%3D%227.382%22%20y1%3D%228.804%22%20y2%3D%2212.809%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23defcff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239ff0f9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGTdtncbDr%22%20x1%3D%2210.262%22%20x2%3D%2211.133%22%20y1%3D%229.07%22%20y2%3D%2213.28%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cceaff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGpCIA3YiZ%22%20x1%3D%225.7%22%20x2%3D%225.721%22%20y1%3D%226.018%22%20y2%3D%227.115%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cceaff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGxLE1RcMN%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(126.027%207.84%208.715)scale(6.80074%209.8598)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23068beb%22%2F%3E%3Cstop%20offset%3D%22.617%22%20stop-color%3D%22%230056cf%22%2F%3E%3Cstop%20offset%3D%22.974%22%20stop-color%3D%22%230027a7%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%2020%2020%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGxLE1RcMN)%22%20d%3D%22M16%206a2%202%200%200%201%202%202v5.5a2.5%202.5%200%200%201-2%202.45l-.5.05V6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG5qkZe11U)%22%20d%3D%22M2%205a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v10.95q-.243.05-.5.05h-11A2.5%202.5%200%200%201%202%2013.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGeZBFkdwi)%22%20d%3D%22M2%205a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v10.95q-.243.05-.5.05h-11A2.5%202.5%200%200%201%202%2013.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGODRgIcmc)%22%20d%3D%22M2%205a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v10.95q-.243.05-.5.05h-11A2.5%202.5%200%200%201%202%2013.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGALnUKeen)%22%20d%3D%22M5.5%209a.5.5%200%200%200-.5.5v3a.5.5%200%200%200%20.5.5h3a.5.5%200%200%200%20.5-.5v-3a.5.5%200%200%200-.5-.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGTdtncbDr)%22%20d%3D%22M10.5%209a.5.5%200%200%200%200%201h2a.5.5%200%200%200%200-1zm-.5%203.5a.5.5%200%200%201%20.5-.5h2a.5.5%200%200%201%200%201h-2a.5.5%200%200%201-.5-.5%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGpCIA3YiZ)%22%20d%3D%22M5%206.5a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7a.5.5%200%200%201-.5-.5%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG5qkZe11U%22%20x1%3D%226%22%20x2%3D%2216.578%22%20y1%3D%221%22%20y2%3D%2215.055%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%233bd5ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23367af2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGeZBFkdwi%22%20x1%3D%2210%22%20x2%3D%2210%22%20y1%3D%2213.5%22%20y2%3D%2216%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.181%22%20stop-color%3D%22%232764e7%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232764e7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGODRgIcmc%22%20x1%3D%229.5%22%20x2%3D%2214.399%22%20y1%3D%227%22%20y2%3D%2219.652%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23dcf8ff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff6ce8%22%20stop-opacity%3D%22.7%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGALnUKeen%22%20x1%3D%225.382%22%20x2%3D%227.382%22%20y1%3D%228.804%22%20y2%3D%2212.809%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23defcff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239ff0f9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGTdtncbDr%22%20x1%3D%2210.262%22%20x2%3D%2211.133%22%20y1%3D%229.07%22%20y2%3D%2213.28%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cceaff%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGpCIA3YiZ%22%20x1%3D%225.7%22%20x2%3D%225.721%22%20y1%3D%226.018%22%20y2%3D%227.115%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fdfdfd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23cceaff%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGxLE1RcMN%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(126.027%207.84%208.715)scale(6.80074%209.8598)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23068beb%22%2F%3E%3Cstop%20offset%3D%22.617%22%20stop-color%3D%22%230056cf%22%2F%3E%3Cstop%20offset%3D%22.974%22%20stop-color%3D%22%230027a7%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/news-20.svg?color=%231a73e8&size=48