news icon
news-16 from Fluent UI System Color Icons by Microsoft Corporation · 16 · MIT Free for personal and commercial use.
- Name
- news-16
- Set
- Fluent UI System Color Icons
- Style
- 16
- Viewbox
- 16×16
- License
- MIT
3 other variants in Fluent UI System Color Icons
The same icon in other sets
Use the news 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(#SVGrwuGtcVh)" d="M13 4a2 2 0 0 1 2 2v4.5a2.5 2.5 0 0 1-2.5 2.5l-.023-9z"/><path fill="url(#SVGJdWhObSs)" d="M1 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8.95q-.243.05-.5.05h-9A2.5 2.5 0 0 1 1 10.5z"/><path fill="url(#SVGeS4wFbmj)" d="M1 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8.95q-.243.05-.5.05h-9A2.5 2.5 0 0 1 1 10.5z"/><path fill="url(#SVGeDF8iboa)" d="M1 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8.95q-.243.05-.5.05h-9A2.5 2.5 0 0 1 1 10.5z"/><path fill="url(#SVG68RIee3f)" d="M3.5 7a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5z"/><path fill="url(#SVGdCTsBbav)" d="M3.5 5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm4 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"/><defs><linearGradient id="SVGJdWhObSs" x1="4.429" x2="13.346" y1=".308" y2="12.311" gradientUnits="userSpaceOnUse"><stop stop-color="#3bd5ff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGeS4wFbmj" x1="7.857" x2="7.857" y1="10.885" y2="13" gradientUnits="userSpaceOnUse"><stop offset=".181" stop-color="#2764e7" stop-opacity="0"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="SVGeDF8iboa" x1="7.429" x2="11.535" y1="5.385" y2="16.126" gradientUnits="userSpaceOnUse"><stop stop-color="#dcf8ff" stop-opacity="0"/><stop offset="1" stop-color="#ff6ce8" stop-opacity=".7"/></linearGradient><linearGradient id="SVG68RIee3f" x1="3.286" x2="4.787" y1="6.853" y2="9.857" gradientUnits="userSpaceOnUse"><stop stop-color="#defcff"/><stop offset="1" stop-color="#9ff0f9"/></linearGradient><linearGradient id="SVGdCTsBbav" x1="3.7" x2="4.227" y1="5.088" y2="10.525" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient><radialGradient id="SVGrwuGtcVh" cx="0" cy="0" r="1" gradientTransform="rotate(129.203 6.987 6.595)scale(6.38779 9.53604)" 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 FluentColorNews16(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(#SVGrwuGtcVh)" d="M13 4a2 2 0 0 1 2 2v4.5a2.5 2.5 0 0 1-2.5 2.5l-.023-9z"/><path fill="url(#SVGJdWhObSs)" d="M1 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8.95q-.243.05-.5.05h-9A2.5 2.5 0 0 1 1 10.5z"/><path fill="url(#SVGeS4wFbmj)" d="M1 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8.95q-.243.05-.5.05h-9A2.5 2.5 0 0 1 1 10.5z"/><path fill="url(#SVGeDF8iboa)" d="M1 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8.95q-.243.05-.5.05h-9A2.5 2.5 0 0 1 1 10.5z"/><path fill="url(#SVG68RIee3f)" d="M3.5 7a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5z"/><path fill="url(#SVGdCTsBbav)" d="M3.5 5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm4 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"/><defs><linearGradient id="SVGJdWhObSs" x1="4.429" x2="13.346" y1=".308" y2="12.311" gradientUnits="userSpaceOnUse"><stop stopColor="#3bd5ff"/><stop offset="1" stopColor="#367af2"/></linearGradient><linearGradient id="SVGeS4wFbmj" x1="7.857" x2="7.857" y1="10.885" y2="13" gradientUnits="userSpaceOnUse"><stop offset=".181" stopColor="#2764e7" stopOpacity="0"/><stop offset="1" stopColor="#2764e7"/></linearGradient><linearGradient id="SVGeDF8iboa" x1="7.429" x2="11.535" y1="5.385" y2="16.126" gradientUnits="userSpaceOnUse"><stop stopColor="#dcf8ff" stopOpacity="0"/><stop offset="1" stopColor="#ff6ce8" stopOpacity=".7"/></linearGradient><linearGradient id="SVG68RIee3f" x1="3.286" x2="4.787" y1="6.853" y2="9.857" gradientUnits="userSpaceOnUse"><stop stopColor="#defcff"/><stop offset="1" stopColor="#9ff0f9"/></linearGradient><linearGradient id="SVGdCTsBbav" x1="3.7" x2="4.227" y1="5.088" y2="10.525" gradientUnits="userSpaceOnUse"><stop stopColor="#fdfdfd"/><stop offset="1" stopColor="#cceaff"/></linearGradient><radialGradient id="SVGrwuGtcVh" cx="0" cy="0" r="1" gradientTransform="rotate(129.203 6.987 6.595)scale(6.38779 9.53604)" 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 16 16"><g fill="none"><path fill="url(#SVGrwuGtcVh)" d="M13 4a2 2 0 0 1 2 2v4.5a2.5 2.5 0 0 1-2.5 2.5l-.023-9z"/><path fill="url(#SVGJdWhObSs)" d="M1 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8.95q-.243.05-.5.05h-9A2.5 2.5 0 0 1 1 10.5z"/><path fill="url(#SVGeS4wFbmj)" d="M1 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8.95q-.243.05-.5.05h-9A2.5 2.5 0 0 1 1 10.5z"/><path fill="url(#SVGeDF8iboa)" d="M1 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8.95q-.243.05-.5.05h-9A2.5 2.5 0 0 1 1 10.5z"/><path fill="url(#SVG68RIee3f)" d="M3.5 7a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5z"/><path fill="url(#SVGdCTsBbav)" d="M3.5 5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm4 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"/><defs><linearGradient id="SVGJdWhObSs" x1="4.429" x2="13.346" y1=".308" y2="12.311" gradientUnits="userSpaceOnUse"><stop stop-color="#3bd5ff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGeS4wFbmj" x1="7.857" x2="7.857" y1="10.885" y2="13" gradientUnits="userSpaceOnUse"><stop offset=".181" stop-color="#2764e7" stop-opacity="0"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="SVGeDF8iboa" x1="7.429" x2="11.535" y1="5.385" y2="16.126" gradientUnits="userSpaceOnUse"><stop stop-color="#dcf8ff" stop-opacity="0"/><stop offset="1" stop-color="#ff6ce8" stop-opacity=".7"/></linearGradient><linearGradient id="SVG68RIee3f" x1="3.286" x2="4.787" y1="6.853" y2="9.857" gradientUnits="userSpaceOnUse"><stop stop-color="#defcff"/><stop offset="1" stop-color="#9ff0f9"/></linearGradient><linearGradient id="SVGdCTsBbav" x1="3.7" x2="4.227" y1="5.088" y2="10.525" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient><radialGradient id="SVGrwuGtcVh" cx="0" cy="0" r="1" gradientTransform="rotate(129.203 6.987 6.595)scale(6.38779 9.53604)" 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-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(%23SVGrwuGtcVh)%22%20d%3D%22M13%204a2%202%200%200%201%202%202v4.5a2.5%202.5%200%200%201-2.5%202.5l-.023-9z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGJdWhObSs)%22%20d%3D%22M1%204a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v8.95q-.243.05-.5.05h-9A2.5%202.5%200%200%201%201%2010.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGeS4wFbmj)%22%20d%3D%22M1%204a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v8.95q-.243.05-.5.05h-9A2.5%202.5%200%200%201%201%2010.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGeDF8iboa)%22%20d%3D%22M1%204a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v8.95q-.243.05-.5.05h-9A2.5%202.5%200%200%201%201%2010.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG68RIee3f)%22%20d%3D%22M3.5%207a.5.5%200%200%200-.5.5v2a.5.5%200%200%200%20.5.5h2a.5.5%200%200%200%20.5-.5v-2a.5.5%200%200%200-.5-.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGdCTsBbav)%22%20d%3D%22M3.5%205a.5.5%200%200%200%200%201h7a.5.5%200%200%200%200-1zm4%202a.5.5%200%200%200%200%201h3a.5.5%200%200%200%200-1zm0%202a.5.5%200%200%200%200%201h3a.5.5%200%200%200%200-1z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGJdWhObSs%22%20x1%3D%224.429%22%20x2%3D%2213.346%22%20y1%3D%22.308%22%20y2%3D%2212.311%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%22SVGeS4wFbmj%22%20x1%3D%227.857%22%20x2%3D%227.857%22%20y1%3D%2210.885%22%20y2%3D%2213%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%22SVGeDF8iboa%22%20x1%3D%227.429%22%20x2%3D%2211.535%22%20y1%3D%225.385%22%20y2%3D%2216.126%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%22SVG68RIee3f%22%20x1%3D%223.286%22%20x2%3D%224.787%22%20y1%3D%226.853%22%20y2%3D%229.857%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%22SVGdCTsBbav%22%20x1%3D%223.7%22%20x2%3D%224.227%22%20y1%3D%225.088%22%20y2%3D%2210.525%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%22SVGrwuGtcVh%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(129.203%206.987%206.595)scale(6.38779%209.53604)%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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGrwuGtcVh)%22%20d%3D%22M13%204a2%202%200%200%201%202%202v4.5a2.5%202.5%200%200%201-2.5%202.5l-.023-9z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGJdWhObSs)%22%20d%3D%22M1%204a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v8.95q-.243.05-.5.05h-9A2.5%202.5%200%200%201%201%2010.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGeS4wFbmj)%22%20d%3D%22M1%204a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v8.95q-.243.05-.5.05h-9A2.5%202.5%200%200%201%201%2010.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGeDF8iboa)%22%20d%3D%22M1%204a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v8.95q-.243.05-.5.05h-9A2.5%202.5%200%200%201%201%2010.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG68RIee3f)%22%20d%3D%22M3.5%207a.5.5%200%200%200-.5.5v2a.5.5%200%200%200%20.5.5h2a.5.5%200%200%200%20.5-.5v-2a.5.5%200%200%200-.5-.5z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGdCTsBbav)%22%20d%3D%22M3.5%205a.5.5%200%200%200%200%201h7a.5.5%200%200%200%200-1zm4%202a.5.5%200%200%200%200%201h3a.5.5%200%200%200%200-1zm0%202a.5.5%200%200%200%200%201h3a.5.5%200%200%200%200-1z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGJdWhObSs%22%20x1%3D%224.429%22%20x2%3D%2213.346%22%20y1%3D%22.308%22%20y2%3D%2212.311%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%22SVGeS4wFbmj%22%20x1%3D%227.857%22%20x2%3D%227.857%22%20y1%3D%2210.885%22%20y2%3D%2213%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%22SVGeDF8iboa%22%20x1%3D%227.429%22%20x2%3D%2211.535%22%20y1%3D%225.385%22%20y2%3D%2216.126%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%22SVG68RIee3f%22%20x1%3D%223.286%22%20x2%3D%224.787%22%20y1%3D%226.853%22%20y2%3D%229.857%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%22SVGdCTsBbav%22%20x1%3D%223.7%22%20x2%3D%224.227%22%20y1%3D%225.088%22%20y2%3D%2210.525%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%22SVGrwuGtcVh%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(129.203%206.987%206.595)scale(6.38779%209.53604)%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-16.svg?color=%231a73e8&size=48
