news icon
news-24 from Fluent UI System Color Icons by Microsoft Corporation · 24 · MIT Free for personal and commercial use.
- Name
- news-24
- Set
- Fluent UI System Color Icons
- Style
- 24
- Viewbox
- 24×24
- 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 24 24"><g fill="none"><path fill="url(#SVGaODYtezl)" d="M19.75 7a2.25 2.25 0 0 1 2.245 2.096L22 9.25v7.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20h-.25V7z"/><path fill="url(#SVGfx92e4JR)" d="M18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h12.5a2.25 2.25 0 0 1 2.245 2.096L19 19.99l-.066.004z"/><path fill="url(#SVGVFmHneNH)" d="M18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h12.5a2.25 2.25 0 0 1 2.245 2.096L19 19.99l-.066.004z"/><path fill="url(#SVGWAFPhbNo)" d="M18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h12.5a2.25 2.25 0 0 1 2.245 2.096L19 19.99l-.066.004z"/><path fill="url(#SVGpGBdWksC)" d="M9.243 11.005a.75.75 0 0 1 .75.75v3.495a.75.75 0 0 1-.75.75H5.748a.75.75 0 0 1-.75-.75v-3.495a.75.75 0 0 1 .75-.75z"/><path fill="url(#SVGgs8fLb6z)" d="M12.246 14.5h3.006a.75.75 0 0 1 .102 1.493l-.101.007h-3.007a.75.75 0 0 1-.101-1.493zh3.006zm0-3.496h3.006a.75.75 0 0 1 .102 1.494l-.101.006h-3.007a.75.75 0 0 1-.101-1.493zh3.006zM5.748 7.502h9.504a.75.75 0 0 1 .102 1.494l-.101.006H5.747a.75.75 0 0 1-.102-1.493zh9.504z"/><defs><linearGradient id="SVGfx92e4JR" x1="6.857" x2="19.923" y1="1.538" y2="18.667" gradientUnits="userSpaceOnUse"><stop stop-color="#3bd5ff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGVFmHneNH" x1="11.714" x2="11.714" y1="16.923" y2="20" gradientUnits="userSpaceOnUse"><stop offset=".181" stop-color="#2764e7" stop-opacity="0"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="SVGWAFPhbNo" x1="11.107" x2="17.197" y1="8.923" y2="24.439" gradientUnits="userSpaceOnUse"><stop stop-color="#dcf8ff" stop-opacity="0"/><stop offset="1" stop-color="#ff6ce8" stop-opacity=".7"/></linearGradient><linearGradient id="SVGpGBdWksC" x1="5.474" x2="7.973" y1="10.76" y2="15.762" gradientUnits="userSpaceOnUse"><stop stop-color="#defcff"/><stop offset="1" stop-color="#9ff0f9"/></linearGradient><linearGradient id="SVGgs8fLb6z" x1="5.961" x2="7.062" y1="7.652" y2="16.846" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient><radialGradient id="SVGaODYtezl" cx="0" cy="0" r="1" gradientTransform="rotate(128.069 9.87 10.343)scale(9.08199 13.4374)" 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 FluentColorNews24(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(#SVGaODYtezl)" d="M19.75 7a2.25 2.25 0 0 1 2.245 2.096L22 9.25v7.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20h-.25V7z"/><path fill="url(#SVGfx92e4JR)" d="M18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h12.5a2.25 2.25 0 0 1 2.245 2.096L19 19.99l-.066.004z"/><path fill="url(#SVGVFmHneNH)" d="M18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h12.5a2.25 2.25 0 0 1 2.245 2.096L19 19.99l-.066.004z"/><path fill="url(#SVGWAFPhbNo)" d="M18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h12.5a2.25 2.25 0 0 1 2.245 2.096L19 19.99l-.066.004z"/><path fill="url(#SVGpGBdWksC)" d="M9.243 11.005a.75.75 0 0 1 .75.75v3.495a.75.75 0 0 1-.75.75H5.748a.75.75 0 0 1-.75-.75v-3.495a.75.75 0 0 1 .75-.75z"/><path fill="url(#SVGgs8fLb6z)" d="M12.246 14.5h3.006a.75.75 0 0 1 .102 1.493l-.101.007h-3.007a.75.75 0 0 1-.101-1.493zh3.006zm0-3.496h3.006a.75.75 0 0 1 .102 1.494l-.101.006h-3.007a.75.75 0 0 1-.101-1.493zh3.006zM5.748 7.502h9.504a.75.75 0 0 1 .102 1.494l-.101.006H5.747a.75.75 0 0 1-.102-1.493zh9.504z"/><defs><linearGradient id="SVGfx92e4JR" x1="6.857" x2="19.923" y1="1.538" y2="18.667" gradientUnits="userSpaceOnUse"><stop stopColor="#3bd5ff"/><stop offset="1" stopColor="#367af2"/></linearGradient><linearGradient id="SVGVFmHneNH" x1="11.714" x2="11.714" y1="16.923" y2="20" gradientUnits="userSpaceOnUse"><stop offset=".181" stopColor="#2764e7" stopOpacity="0"/><stop offset="1" stopColor="#2764e7"/></linearGradient><linearGradient id="SVGWAFPhbNo" x1="11.107" x2="17.197" y1="8.923" y2="24.439" gradientUnits="userSpaceOnUse"><stop stopColor="#dcf8ff" stopOpacity="0"/><stop offset="1" stopColor="#ff6ce8" stopOpacity=".7"/></linearGradient><linearGradient id="SVGpGBdWksC" x1="5.474" x2="7.973" y1="10.76" y2="15.762" gradientUnits="userSpaceOnUse"><stop stopColor="#defcff"/><stop offset="1" stopColor="#9ff0f9"/></linearGradient><linearGradient id="SVGgs8fLb6z" x1="5.961" x2="7.062" y1="7.652" y2="16.846" gradientUnits="userSpaceOnUse"><stop stopColor="#fdfdfd"/><stop offset="1" stopColor="#cceaff"/></linearGradient><radialGradient id="SVGaODYtezl" cx="0" cy="0" r="1" gradientTransform="rotate(128.069 9.87 10.343)scale(9.08199 13.4374)" 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 24 24"><g fill="none"><path fill="url(#SVGaODYtezl)" d="M19.75 7a2.25 2.25 0 0 1 2.245 2.096L22 9.25v7.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20h-.25V7z"/><path fill="url(#SVGfx92e4JR)" d="M18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h12.5a2.25 2.25 0 0 1 2.245 2.096L19 19.99l-.066.004z"/><path fill="url(#SVGVFmHneNH)" d="M18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h12.5a2.25 2.25 0 0 1 2.245 2.096L19 19.99l-.066.004z"/><path fill="url(#SVGWAFPhbNo)" d="M18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h12.5a2.25 2.25 0 0 1 2.245 2.096L19 19.99l-.066.004z"/><path fill="url(#SVGpGBdWksC)" d="M9.243 11.005a.75.75 0 0 1 .75.75v3.495a.75.75 0 0 1-.75.75H5.748a.75.75 0 0 1-.75-.75v-3.495a.75.75 0 0 1 .75-.75z"/><path fill="url(#SVGgs8fLb6z)" d="M12.246 14.5h3.006a.75.75 0 0 1 .102 1.493l-.101.007h-3.007a.75.75 0 0 1-.101-1.493zh3.006zm0-3.496h3.006a.75.75 0 0 1 .102 1.494l-.101.006h-3.007a.75.75 0 0 1-.101-1.493zh3.006zM5.748 7.502h9.504a.75.75 0 0 1 .102 1.494l-.101.006H5.747a.75.75 0 0 1-.102-1.493zh9.504z"/><defs><linearGradient id="SVGfx92e4JR" x1="6.857" x2="19.923" y1="1.538" y2="18.667" gradientUnits="userSpaceOnUse"><stop stop-color="#3bd5ff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGVFmHneNH" x1="11.714" x2="11.714" y1="16.923" y2="20" gradientUnits="userSpaceOnUse"><stop offset=".181" stop-color="#2764e7" stop-opacity="0"/><stop offset="1" stop-color="#2764e7"/></linearGradient><linearGradient id="SVGWAFPhbNo" x1="11.107" x2="17.197" y1="8.923" y2="24.439" gradientUnits="userSpaceOnUse"><stop stop-color="#dcf8ff" stop-opacity="0"/><stop offset="1" stop-color="#ff6ce8" stop-opacity=".7"/></linearGradient><linearGradient id="SVGpGBdWksC" x1="5.474" x2="7.973" y1="10.76" y2="15.762" gradientUnits="userSpaceOnUse"><stop stop-color="#defcff"/><stop offset="1" stop-color="#9ff0f9"/></linearGradient><linearGradient id="SVGgs8fLb6z" x1="5.961" x2="7.062" y1="7.652" y2="16.846" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd"/><stop offset="1" stop-color="#cceaff"/></linearGradient><radialGradient id="SVGaODYtezl" cx="0" cy="0" r="1" gradientTransform="rotate(128.069 9.87 10.343)scale(9.08199 13.4374)" 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-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(%23SVGaODYtezl)%22%20d%3D%22M19.75%207a2.25%202.25%200%200%201%202.245%202.096L22%209.25v7.5a3.25%203.25%200%200%201-3.066%203.245L18.75%2020h-.25V7z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGfx92e4JR)%22%20d%3D%22M18.75%2020H5.25a3.25%203.25%200%200%201-3.245-3.066L2%2016.75V6.25a2.25%202.25%200%200%201%202.096-2.245L4.25%204h12.5a2.25%202.25%200%200%201%202.245%202.096L19%2019.99l-.066.004z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGVFmHneNH)%22%20d%3D%22M18.75%2020H5.25a3.25%203.25%200%200%201-3.245-3.066L2%2016.75V6.25a2.25%202.25%200%200%201%202.096-2.245L4.25%204h12.5a2.25%202.25%200%200%201%202.245%202.096L19%2019.99l-.066.004z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGWAFPhbNo)%22%20d%3D%22M18.75%2020H5.25a3.25%203.25%200%200%201-3.245-3.066L2%2016.75V6.25a2.25%202.25%200%200%201%202.096-2.245L4.25%204h12.5a2.25%202.25%200%200%201%202.245%202.096L19%2019.99l-.066.004z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGpGBdWksC)%22%20d%3D%22M9.243%2011.005a.75.75%200%200%201%20.75.75v3.495a.75.75%200%200%201-.75.75H5.748a.75.75%200%200%201-.75-.75v-3.495a.75.75%200%200%201%20.75-.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGgs8fLb6z)%22%20d%3D%22M12.246%2014.5h3.006a.75.75%200%200%201%20.102%201.493l-.101.007h-3.007a.75.75%200%200%201-.101-1.493zh3.006zm0-3.496h3.006a.75.75%200%200%201%20.102%201.494l-.101.006h-3.007a.75.75%200%200%201-.101-1.493zh3.006zM5.748%207.502h9.504a.75.75%200%200%201%20.102%201.494l-.101.006H5.747a.75.75%200%200%201-.102-1.493zh9.504z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGfx92e4JR%22%20x1%3D%226.857%22%20x2%3D%2219.923%22%20y1%3D%221.538%22%20y2%3D%2218.667%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%22SVGVFmHneNH%22%20x1%3D%2211.714%22%20x2%3D%2211.714%22%20y1%3D%2216.923%22%20y2%3D%2220%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%22SVGWAFPhbNo%22%20x1%3D%2211.107%22%20x2%3D%2217.197%22%20y1%3D%228.923%22%20y2%3D%2224.439%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%22SVGpGBdWksC%22%20x1%3D%225.474%22%20x2%3D%227.973%22%20y1%3D%2210.76%22%20y2%3D%2215.762%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%22SVGgs8fLb6z%22%20x1%3D%225.961%22%20x2%3D%227.062%22%20y1%3D%227.652%22%20y2%3D%2216.846%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%22SVGaODYtezl%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(128.069%209.87%2010.343)scale(9.08199%2013.4374)%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGaODYtezl)%22%20d%3D%22M19.75%207a2.25%202.25%200%200%201%202.245%202.096L22%209.25v7.5a3.25%203.25%200%200%201-3.066%203.245L18.75%2020h-.25V7z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGfx92e4JR)%22%20d%3D%22M18.75%2020H5.25a3.25%203.25%200%200%201-3.245-3.066L2%2016.75V6.25a2.25%202.25%200%200%201%202.096-2.245L4.25%204h12.5a2.25%202.25%200%200%201%202.245%202.096L19%2019.99l-.066.004z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGVFmHneNH)%22%20d%3D%22M18.75%2020H5.25a3.25%203.25%200%200%201-3.245-3.066L2%2016.75V6.25a2.25%202.25%200%200%201%202.096-2.245L4.25%204h12.5a2.25%202.25%200%200%201%202.245%202.096L19%2019.99l-.066.004z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGWAFPhbNo)%22%20d%3D%22M18.75%2020H5.25a3.25%203.25%200%200%201-3.245-3.066L2%2016.75V6.25a2.25%202.25%200%200%201%202.096-2.245L4.25%204h12.5a2.25%202.25%200%200%201%202.245%202.096L19%2019.99l-.066.004z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGpGBdWksC)%22%20d%3D%22M9.243%2011.005a.75.75%200%200%201%20.75.75v3.495a.75.75%200%200%201-.75.75H5.748a.75.75%200%200%201-.75-.75v-3.495a.75.75%200%200%201%20.75-.75z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGgs8fLb6z)%22%20d%3D%22M12.246%2014.5h3.006a.75.75%200%200%201%20.102%201.493l-.101.007h-3.007a.75.75%200%200%201-.101-1.493zh3.006zm0-3.496h3.006a.75.75%200%200%201%20.102%201.494l-.101.006h-3.007a.75.75%200%200%201-.101-1.493zh3.006zM5.748%207.502h9.504a.75.75%200%200%201%20.102%201.494l-.101.006H5.747a.75.75%200%200%201-.102-1.493zh9.504z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGfx92e4JR%22%20x1%3D%226.857%22%20x2%3D%2219.923%22%20y1%3D%221.538%22%20y2%3D%2218.667%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%22SVGVFmHneNH%22%20x1%3D%2211.714%22%20x2%3D%2211.714%22%20y1%3D%2216.923%22%20y2%3D%2220%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%22SVGWAFPhbNo%22%20x1%3D%2211.107%22%20x2%3D%2217.197%22%20y1%3D%228.923%22%20y2%3D%2224.439%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%22SVGpGBdWksC%22%20x1%3D%225.474%22%20x2%3D%227.973%22%20y1%3D%2210.76%22%20y2%3D%2215.762%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%22SVGgs8fLb6z%22%20x1%3D%225.961%22%20x2%3D%227.062%22%20y1%3D%227.652%22%20y2%3D%2216.846%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%22SVGaODYtezl%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(128.069%209.87%2010.343)scale(9.08199%2013.4374)%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-24.svg?color=%231a73e8&size=48
