material three icon
material-three from IconPark by ByteDance · Color · Charts · Apache-2.0 Free for personal and commercial use.
- Name
- material-three
- Set
- IconPark
- Style
- Color
- Category
- Charts
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
More charts icons from IconPark
Use the material three icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M9 15V9.56389C9 8.67237 9.08702 8.34908 9.25044 8.02315C9.41385 7.69723 9.65365 7.44144 9.95921 7.26713C10.2648 7.09283 10.5678 7 11.4036 7H36.5964C37.4322 7 37.7352 7.09283 38.0408 7.26713C38.3463 7.44144 38.5862 7.69723 38.7496 8.02315C38.913 8.34908 39 8.67237 39 9.56389V15"/><path stroke="#000" stroke-linejoin="round" stroke-width="4" d="M5 15H43V41H5V15Z"/><path fill="#000" fill-rule="evenodd" d="M13 26C14.6569 26 16 24.6569 16 23C16 21.3431 14.6569 20 13 20C11.3431 20 10 21.3431 10 23C10 24.6569 11.3431 26 13 26Z" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M5.56934 40.39L15.0004 30L20.0004 34L26.0004 27L42.3941 40.39"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkMaterialThree(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M9 15V9.56389C9 8.67237 9.08702 8.34908 9.25044 8.02315C9.41385 7.69723 9.65365 7.44144 9.95921 7.26713C10.2648 7.09283 10.5678 7 11.4036 7H36.5964C37.4322 7 37.7352 7.09283 38.0408 7.26713C38.3463 7.44144 38.5862 7.69723 38.7496 8.02315C38.913 8.34908 39 8.67237 39 9.56389V15"/><path stroke="#000" strokeLinejoin="round" strokeWidth="4" d="M5 15H43V41H5V15Z"/><path fill="#000" fillRule="evenodd" d="M13 26C14.6569 26 16 24.6569 16 23C16 21.3431 14.6569 20 13 20C11.3431 20 10 21.3431 10 23C10 24.6569 11.3431 26 13 26Z" clipRule="evenodd"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M5.56934 40.39L15.0004 30L20.0004 34L26.0004 27L42.3941 40.39"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M9 15V9.56389C9 8.67237 9.08702 8.34908 9.25044 8.02315C9.41385 7.69723 9.65365 7.44144 9.95921 7.26713C10.2648 7.09283 10.5678 7 11.4036 7H36.5964C37.4322 7 37.7352 7.09283 38.0408 7.26713C38.3463 7.44144 38.5862 7.69723 38.7496 8.02315C38.913 8.34908 39 8.67237 39 9.56389V15"/><path stroke="#000" stroke-linejoin="round" stroke-width="4" d="M5 15H43V41H5V15Z"/><path fill="#000" fill-rule="evenodd" d="M13 26C14.6569 26 16 24.6569 16 23C16 21.3431 14.6569 20 13 20C11.3431 20 10 21.3431 10 23C10 24.6569 11.3431 26 13 26Z" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M5.56934 40.39L15.0004 30L20.0004 34L26.0004 27L42.3941 40.39"/></g></svg> </template>
CSS
.icon-material-three {
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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M9%2015V9.56389C9%208.67237%209.08702%208.34908%209.25044%208.02315C9.41385%207.69723%209.65365%207.44144%209.95921%207.26713C10.2648%207.09283%2010.5678%207%2011.4036%207H36.5964C37.4322%207%2037.7352%207.09283%2038.0408%207.26713C38.3463%207.44144%2038.5862%207.69723%2038.7496%208.02315C38.913%208.34908%2039%208.67237%2039%209.56389V15%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M5%2015H43V41H5V15Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M13%2026C14.6569%2026%2016%2024.6569%2016%2023C16%2021.3431%2014.6569%2020%2013%2020C11.3431%2020%2010%2021.3431%2010%2023C10%2024.6569%2011.3431%2026%2013%2026Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M5.56934%2040.39L15.0004%2030L20.0004%2034L26.0004%2027L42.3941%2040.39%22%2F%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M9%2015V9.56389C9%208.67237%209.08702%208.34908%209.25044%208.02315C9.41385%207.69723%209.65365%207.44144%209.95921%207.26713C10.2648%207.09283%2010.5678%207%2011.4036%207H36.5964C37.4322%207%2037.7352%207.09283%2038.0408%207.26713C38.3463%207.44144%2038.5862%207.69723%2038.7496%208.02315C38.913%208.34908%2039%208.67237%2039%209.56389V15%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M5%2015H43V41H5V15Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M13%2026C14.6569%2026%2016%2024.6569%2016%2023C16%2021.3431%2014.6569%2020%2013%2020C11.3431%2020%2010%2021.3431%2010%2023C10%2024.6569%2011.3431%2026%2013%2026Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M5.56934%2040.39L15.0004%2030L20.0004%2034L26.0004%2027L42.3941%2040.39%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/material-three.svg?color=%231a73e8&size=48
