dine in icon

dine-in-rounded from Material Symbols by Google · Rounded · Social · Apache-2.0 Free for personal and commercial use.

Name: dine-in-rounded
Set: Material Symbols
Style: Rounded
Category: Social
Viewbox: 24×24
License: Apache 2.0
Aliases: dine-in-outline-rounded

2 other variants in Material Symbols

dine-in dine-in-sharp

The same icon in other sets

dine-inMaterial Symbols Light

More social icons from Material Symbols

Use the dine in icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V8q0-.425.288-.712T3 7t.713.288T4 8v10h6q.425 0 .713.288T11 19t-.288.713T10 20zM7 6q-.825 0-1.412-.587T5 4t.588-1.412T7 2t1.413.588T9 4t-.587 1.413T7 6m5 15v-4H7q-.825 0-1.412-.587T5 15V9.1q0-.875.6-1.487T7.05 7q.475 0 .888.2t.712.55q1.125 1.225 2.413 2.238T14 11h1.35q-.45-.3-.763-.725t-.462-.95q-.1-.325.125-.575t.575-.25H19.2q.35 0 .563.25t.137.575q-.125.525-.45.95t-.775.725H21q.425 0 .713.288T22 12t-.288.713T21 13h-3v8q0 .425-.288.713T17 22t-.712-.288T16 21v-8h-2q-1.325 0-2.675-.575T9 11.05v3.45h3q.825 0 1.413.588T14 16.5V21q0 .425-.288.713T13 22t-.712-.288T12 21"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsDineInRounded(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="M4 20q-.825 0-1.412-.587T2 18V8q0-.425.288-.712T3 7t.713.288T4 8v10h6q.425 0 .713.288T11 19t-.288.713T10 20zM7 6q-.825 0-1.412-.587T5 4t.588-1.412T7 2t1.413.588T9 4t-.587 1.413T7 6m5 15v-4H7q-.825 0-1.412-.587T5 15V9.1q0-.875.6-1.487T7.05 7q.475 0 .888.2t.712.55q1.125 1.225 2.413 2.238T14 11h1.35q-.45-.3-.763-.725t-.462-.95q-.1-.325.125-.575t.575-.25H19.2q.35 0 .563.25t.137.575q-.125.525-.45.95t-.775.725H21q.425 0 .713.288T22 12t-.288.713T21 13h-3v8q0 .425-.288.713T17 22t-.712-.288T16 21v-8h-2q-1.325 0-2.675-.575T9 11.05v3.45h3q.825 0 1.413.588T14 16.5V21q0 .425-.288.713T13 22t-.712-.288T12 21"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V8q0-.425.288-.712T3 7t.713.288T4 8v10h6q.425 0 .713.288T11 19t-.288.713T10 20zM7 6q-.825 0-1.412-.587T5 4t.588-1.412T7 2t1.413.588T9 4t-.587 1.413T7 6m5 15v-4H7q-.825 0-1.412-.587T5 15V9.1q0-.875.6-1.487T7.05 7q.475 0 .888.2t.712.55q1.125 1.225 2.413 2.238T14 11h1.35q-.45-.3-.763-.725t-.462-.95q-.1-.325.125-.575t.575-.25H19.2q.35 0 .563.25t.137.575q-.125.525-.45.95t-.775.725H21q.425 0 .713.288T22 12t-.288.713T21 13h-3v8q0 .425-.288.713T17 22t-.712-.288T16 21v-8h-2q-1.325 0-2.675-.575T9 11.05v3.45h3q.825 0 1.413.588T14 16.5V21q0 .425-.288.713T13 22t-.712-.288T12 21"/></svg>
</template>

CSS

.icon-dine-in-rounded {
  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%22M4%2020q-.825%200-1.412-.587T2%2018V8q0-.425.288-.712T3%207t.713.288T4%208v10h6q.425%200%20.713.288T11%2019t-.288.713T10%2020zM7%206q-.825%200-1.412-.587T5%204t.588-1.412T7%202t1.413.588T9%204t-.587%201.413T7%206m5%2015v-4H7q-.825%200-1.412-.587T5%2015V9.1q0-.875.6-1.487T7.05%207q.475%200%20.888.2t.712.55q1.125%201.225%202.413%202.238T14%2011h1.35q-.45-.3-.763-.725t-.462-.95q-.1-.325.125-.575t.575-.25H19.2q.35%200%20.563.25t.137.575q-.125.525-.45.95t-.775.725H21q.425%200%20.713.288T22%2012t-.288.713T21%2013h-3v8q0%20.425-.288.713T17%2022t-.712-.288T16%2021v-8h-2q-1.325%200-2.675-.575T9%2011.05v3.45h3q.825%200%201.413.588T14%2016.5V21q0%20.425-.288.713T13%2022t-.712-.288T12%2021%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%22M4%2020q-.825%200-1.412-.587T2%2018V8q0-.425.288-.712T3%207t.713.288T4%208v10h6q.425%200%20.713.288T11%2019t-.288.713T10%2020zM7%206q-.825%200-1.412-.587T5%204t.588-1.412T7%202t1.413.588T9%204t-.587%201.413T7%206m5%2015v-4H7q-.825%200-1.412-.587T5%2015V9.1q0-.875.6-1.487T7.05%207q.475%200%20.888.2t.712.55q1.125%201.225%202.413%202.238T14%2011h1.35q-.45-.3-.763-.725t-.462-.95q-.1-.325.125-.575t.575-.25H19.2q.35%200%20.563.25t.137.575q-.125.525-.45.95t-.775.725H21q.425%200%20.713.288T22%2012t-.288.713T21%2013h-3v8q0%20.425-.288.713T17%2022t-.712-.288T16%2021v-8h-2q-1.325%200-2.675-.575T9%2011.05v3.45h3q.825%200%201.413.588T14%2016.5V21q0%20.425-.288.713T13%2022t-.712-.288T12%2021%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols/dine-in-rounded.svg?color=%231a73e8&size=48