tap and play icon

tap-and-play-outline-rounded from Material Symbols by Google · Outline Rounded · Apache-2.0 Free for personal and commercial use.

Name
tap-and-play-outline-rounded
Set
Material Symbols
Style
Outline Rounded
Viewbox
24×24
License
Apache 2.0

4 other variants in Material Symbols

tap-and-play-outlinetap-and-play-outline-sharptap-and-play-roundedtap-and-play-sharp

The same icon in other sets

tap-and-play-outlineMaterial Symbols Light

Use the tap and play icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7 4h10V3H7zm0 0V3zM6 23q-.425 0-.712-.288T5 22t.288-.712T6 21t.713.288T7 22t-.288.713T6 23M7 6v4q0 .425-.288.713T6 11t-.712-.288T5 10V3q0-.825.588-1.412T7 1h10q.825 0 1.413.588T19 3v19q0 .425-.288.713T18 23t-.712-.288T17 22V6zm.825 14.175q-.375-.375-.837-.65t-.988-.4q-.425-.125-.712-.413T5 18t.3-.712t.7-.213q.925.15 1.763.588T9.25 18.75t1.088 1.488t.587 1.762q.075.4-.213.7T10 23t-.712-.288T8.875 22q-.125-.525-.4-.987t-.65-.838m2.825-2.825q-.95-.95-2.137-1.537T6 15.05q-.425-.05-.712-.337T5 14t.3-.712t.725-.238q1.725.175 3.275.912t2.775 1.963t1.938 2.775t.912 3.275q.05.425-.225.725t-.7.3t-.725-.287t-.35-.713q-.175-1.325-.75-2.512T10.65 17.35"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsTapAndPlayOutlineRounded(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="M7 4h10V3H7zm0 0V3zM6 23q-.425 0-.712-.288T5 22t.288-.712T6 21t.713.288T7 22t-.288.713T6 23M7 6v4q0 .425-.288.713T6 11t-.712-.288T5 10V3q0-.825.588-1.412T7 1h10q.825 0 1.413.588T19 3v19q0 .425-.288.713T18 23t-.712-.288T17 22V6zm.825 14.175q-.375-.375-.837-.65t-.988-.4q-.425-.125-.712-.413T5 18t.3-.712t.7-.213q.925.15 1.763.588T9.25 18.75t1.088 1.488t.587 1.762q.075.4-.213.7T10 23t-.712-.288T8.875 22q-.125-.525-.4-.987t-.65-.838m2.825-2.825q-.95-.95-2.137-1.537T6 15.05q-.425-.05-.712-.337T5 14t.3-.712t.725-.238q1.725.175 3.275.912t2.775 1.963t1.938 2.775t.912 3.275q.05.425-.225.725t-.7.3t-.725-.287t-.35-.713q-.175-1.325-.75-2.512T10.65 17.35"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7 4h10V3H7zm0 0V3zM6 23q-.425 0-.712-.288T5 22t.288-.712T6 21t.713.288T7 22t-.288.713T6 23M7 6v4q0 .425-.288.713T6 11t-.712-.288T5 10V3q0-.825.588-1.412T7 1h10q.825 0 1.413.588T19 3v19q0 .425-.288.713T18 23t-.712-.288T17 22V6zm.825 14.175q-.375-.375-.837-.65t-.988-.4q-.425-.125-.712-.413T5 18t.3-.712t.7-.213q.925.15 1.763.588T9.25 18.75t1.088 1.488t.587 1.762q.075.4-.213.7T10 23t-.712-.288T8.875 22q-.125-.525-.4-.987t-.65-.838m2.825-2.825q-.95-.95-2.137-1.537T6 15.05q-.425-.05-.712-.337T5 14t.3-.712t.725-.238q1.725.175 3.275.912t2.775 1.963t1.938 2.775t.912 3.275q.05.425-.225.725t-.7.3t-.725-.287t-.35-.713q-.175-1.325-.75-2.512T10.65 17.35"/></svg>
</template>

CSS

.icon-tap-and-play-outline-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%22M7%204h10V3H7zm0%200V3zM6%2023q-.425%200-.712-.288T5%2022t.288-.712T6%2021t.713.288T7%2022t-.288.713T6%2023M7%206v4q0%20.425-.288.713T6%2011t-.712-.288T5%2010V3q0-.825.588-1.412T7%201h10q.825%200%201.413.588T19%203v19q0%20.425-.288.713T18%2023t-.712-.288T17%2022V6zm.825%2014.175q-.375-.375-.837-.65t-.988-.4q-.425-.125-.712-.413T5%2018t.3-.712t.7-.213q.925.15%201.763.588T9.25%2018.75t1.088%201.488t.587%201.762q.075.4-.213.7T10%2023t-.712-.288T8.875%2022q-.125-.525-.4-.987t-.65-.838m2.825-2.825q-.95-.95-2.137-1.537T6%2015.05q-.425-.05-.712-.337T5%2014t.3-.712t.725-.238q1.725.175%203.275.912t2.775%201.963t1.938%202.775t.912%203.275q.05.425-.225.725t-.7.3t-.725-.287t-.35-.713q-.175-1.325-.75-2.512T10.65%2017.35%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%22M7%204h10V3H7zm0%200V3zM6%2023q-.425%200-.712-.288T5%2022t.288-.712T6%2021t.713.288T7%2022t-.288.713T6%2023M7%206v4q0%20.425-.288.713T6%2011t-.712-.288T5%2010V3q0-.825.588-1.412T7%201h10q.825%200%201.413.588T19%203v19q0%20.425-.288.713T18%2023t-.712-.288T17%2022V6zm.825%2014.175q-.375-.375-.837-.65t-.988-.4q-.425-.125-.712-.413T5%2018t.3-.712t.7-.213q.925.15%201.763.588T9.25%2018.75t1.088%201.488t.587%201.762q.075.4-.213.7T10%2023t-.712-.288T8.875%2022q-.125-.525-.4-.987t-.65-.838m2.825-2.825q-.95-.95-2.137-1.537T6%2015.05q-.425-.05-.712-.337T5%2014t.3-.712t.725-.238q1.725.175%203.275.912t2.775%201.963t1.938%202.775t.912%203.275q.05.425-.225.725t-.7.3t-.725-.287t-.35-.713q-.175-1.325-.75-2.512T10.65%2017.35%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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