screen attention icon
screen-attention from Material Symbols by Google · Regular · Apache-2.0 Free for personal and commercial use.
- Name
- screen-attention
- Set
- Material Symbols
- Style
- Regular
- Viewbox
- 24×24
- License
- Apache 2.0
Related icons in Material Symbols
Use the screen attention icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9 20v-2h4l-1.8-3.575q-.125-.2-.162-.437Q11 13.75 11 13.525V11h2v3l1.825 3.65q.075.175.125.35t.05.375q0 .675-.475 1.15q-.475.475-1.15.475Zm-2.5-6q-1.05 0-1.775-.725Q4 12.55 4 11.5q0-1.05.725-1.775Q5.45 9 6.5 9q1.05 0 1.775.725Q9 10.45 9 11.5q0 1.05-.725 1.775Q7.55 14 6.5 14Zm11 0q-1.05 0-1.775-.725Q15 12.55 15 11.5q0-1.05.725-1.775Q16.45 9 17.5 9q1.05 0 1.775.725Q20 10.45 20 11.5q0 1.05-.725 1.775Q18.55 14 17.5 14ZM3.425 7L2 5.6q.825-.75 1.85-1.175Q4.875 4 6 4t2.15.425Q9.175 4.85 10 5.6L8.575 7q-.55-.475-1.2-.738Q6.725 6 6 6t-1.375.262q-.65.263-1.2.738Zm12 0L14 5.6q.825-.75 1.85-1.175Q16.875 4 18 4t2.15.425Q21.175 4.85 22 5.6L20.575 7q-.55-.475-1.2-.738Q18.725 6 18 6t-1.375.262q-.65.263-1.2.738Z"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsScreenAttention(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9 20v-2h4l-1.8-3.575q-.125-.2-.162-.437Q11 13.75 11 13.525V11h2v3l1.825 3.65q.075.175.125.35t.05.375q0 .675-.475 1.15q-.475.475-1.15.475Zm-2.5-6q-1.05 0-1.775-.725Q4 12.55 4 11.5q0-1.05.725-1.775Q5.45 9 6.5 9q1.05 0 1.775.725Q9 10.45 9 11.5q0 1.05-.725 1.775Q7.55 14 6.5 14Zm11 0q-1.05 0-1.775-.725Q15 12.55 15 11.5q0-1.05.725-1.775Q16.45 9 17.5 9q1.05 0 1.775.725Q20 10.45 20 11.5q0 1.05-.725 1.775Q18.55 14 17.5 14ZM3.425 7L2 5.6q.825-.75 1.85-1.175Q4.875 4 6 4t2.15.425Q9.175 4.85 10 5.6L8.575 7q-.55-.475-1.2-.738Q6.725 6 6 6t-1.375.262q-.65.263-1.2.738Zm12 0L14 5.6q.825-.75 1.85-1.175Q16.875 4 18 4t2.15.425Q21.175 4.85 22 5.6L20.575 7q-.55-.475-1.2-.738Q18.725 6 18 6t-1.375.262q-.65.263-1.2.738Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9 20v-2h4l-1.8-3.575q-.125-.2-.162-.437Q11 13.75 11 13.525V11h2v3l1.825 3.65q.075.175.125.35t.05.375q0 .675-.475 1.15q-.475.475-1.15.475Zm-2.5-6q-1.05 0-1.775-.725Q4 12.55 4 11.5q0-1.05.725-1.775Q5.45 9 6.5 9q1.05 0 1.775.725Q9 10.45 9 11.5q0 1.05-.725 1.775Q7.55 14 6.5 14Zm11 0q-1.05 0-1.775-.725Q15 12.55 15 11.5q0-1.05.725-1.775Q16.45 9 17.5 9q1.05 0 1.775.725Q20 10.45 20 11.5q0 1.05-.725 1.775Q18.55 14 17.5 14ZM3.425 7L2 5.6q.825-.75 1.85-1.175Q4.875 4 6 4t2.15.425Q9.175 4.85 10 5.6L8.575 7q-.55-.475-1.2-.738Q6.725 6 6 6t-1.375.262q-.65.263-1.2.738Zm12 0L14 5.6q.825-.75 1.85-1.175Q16.875 4 18 4t2.15.425Q21.175 4.85 22 5.6L20.575 7q-.55-.475-1.2-.738Q18.725 6 18 6t-1.375.262q-.65.263-1.2.738Z"/></svg> </template>
CSS
.icon-screen-attention {
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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9%2020v-2h4l-1.8-3.575q-.125-.2-.162-.437Q11%2013.75%2011%2013.525V11h2v3l1.825%203.65q.075.175.125.35t.05.375q0%20.675-.475%201.15q-.475.475-1.15.475Zm-2.5-6q-1.05%200-1.775-.725Q4%2012.55%204%2011.5q0-1.05.725-1.775Q5.45%209%206.5%209q1.05%200%201.775.725Q9%2010.45%209%2011.5q0%201.05-.725%201.775Q7.55%2014%206.5%2014Zm11%200q-1.05%200-1.775-.725Q15%2012.55%2015%2011.5q0-1.05.725-1.775Q16.45%209%2017.5%209q1.05%200%201.775.725Q20%2010.45%2020%2011.5q0%201.05-.725%201.775Q18.55%2014%2017.5%2014ZM3.425%207L2%205.6q.825-.75%201.85-1.175Q4.875%204%206%204t2.15.425Q9.175%204.85%2010%205.6L8.575%207q-.55-.475-1.2-.738Q6.725%206%206%206t-1.375.262q-.65.263-1.2.738Zm12%200L14%205.6q.825-.75%201.85-1.175Q16.875%204%2018%204t2.15.425Q21.175%204.85%2022%205.6L20.575%207q-.55-.475-1.2-.738Q18.725%206%2018%206t-1.375.262q-.65.263-1.2.738Z%22%2F%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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9%2020v-2h4l-1.8-3.575q-.125-.2-.162-.437Q11%2013.75%2011%2013.525V11h2v3l1.825%203.65q.075.175.125.35t.05.375q0%20.675-.475%201.15q-.475.475-1.15.475Zm-2.5-6q-1.05%200-1.775-.725Q4%2012.55%204%2011.5q0-1.05.725-1.775Q5.45%209%206.5%209q1.05%200%201.775.725Q9%2010.45%209%2011.5q0%201.05-.725%201.775Q7.55%2014%206.5%2014Zm11%200q-1.05%200-1.775-.725Q15%2012.55%2015%2011.5q0-1.05.725-1.775Q16.45%209%2017.5%209q1.05%200%201.775.725Q20%2010.45%2020%2011.5q0%201.05-.725%201.775Q18.55%2014%2017.5%2014ZM3.425%207L2%205.6q.825-.75%201.85-1.175Q4.875%204%206%204t2.15.425Q9.175%204.85%2010%205.6L8.575%207q-.55-.475-1.2-.738Q6.725%206%206%206t-1.375.262q-.65.263-1.2.738Zm12%200L14%205.6q.825-.75%201.85-1.175Q16.875%204%2018%204t2.15.425Q21.175%204.85%2022%205.6L20.575%207q-.55-.475-1.2-.738Q18.725%206%2018%206t-1.375.262q-.65.263-1.2.738Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/screen-attention.svg?color=%231a73e8&size=48
