cassette tape icon

cassette-tape-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.

Name
cassette-tape-light
Set
Phosphor
Style
Light
Viewbox
256×256
License
MIT

5 other variants in Phosphor

cassette-tapecassette-tape-boldcassette-tape-duotonecassette-tape-fillcassette-tape-thin

The same icon in other sets

cassette-tapeHuge Iconscassette-tapeLucide

Use the cassette tape icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M224 50H32a14 14 0 0 0-14 14v128a14 14 0 0 0 14 14h192a14 14 0 0 0 14-14V64a14 14 0 0 0-14-14M76 194l15-20h74l15 20Zm150-2a2 2 0 0 1-2 2h-29l-22.2-29.6a6 6 0 0 0-4.8-2.4H88a6 6 0 0 0-4.8 2.4L61 194H32a2 2 0 0 1-2-2V64a2 2 0 0 1 2-2h192a2 2 0 0 1 2 2ZM176 82H80a30 30 0 0 0 0 60h96a30 30 0 0 0 0-60m-24 12a29.92 29.92 0 0 0 0 36h-48a29.92 29.92 0 0 0 0-36Zm-90 18a18 18 0 1 1 18 18a18 18 0 0 1-18-18m114 18a18 18 0 1 1 18-18a18 18 0 0 1-18 18"/></svg>

React

import type { SVGProps } from "react";

export function PhCassetteTapeLight(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M224 50H32a14 14 0 0 0-14 14v128a14 14 0 0 0 14 14h192a14 14 0 0 0 14-14V64a14 14 0 0 0-14-14M76 194l15-20h74l15 20Zm150-2a2 2 0 0 1-2 2h-29l-22.2-29.6a6 6 0 0 0-4.8-2.4H88a6 6 0 0 0-4.8 2.4L61 194H32a2 2 0 0 1-2-2V64a2 2 0 0 1 2-2h192a2 2 0 0 1 2 2ZM176 82H80a30 30 0 0 0 0 60h96a30 30 0 0 0 0-60m-24 12a29.92 29.92 0 0 0 0 36h-48a29.92 29.92 0 0 0 0-36Zm-90 18a18 18 0 1 1 18 18a18 18 0 0 1-18-18m114 18a18 18 0 1 1 18-18a18 18 0 0 1-18 18"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M224 50H32a14 14 0 0 0-14 14v128a14 14 0 0 0 14 14h192a14 14 0 0 0 14-14V64a14 14 0 0 0-14-14M76 194l15-20h74l15 20Zm150-2a2 2 0 0 1-2 2h-29l-22.2-29.6a6 6 0 0 0-4.8-2.4H88a6 6 0 0 0-4.8 2.4L61 194H32a2 2 0 0 1-2-2V64a2 2 0 0 1 2-2h192a2 2 0 0 1 2 2ZM176 82H80a30 30 0 0 0 0 60h96a30 30 0 0 0 0-60m-24 12a29.92 29.92 0 0 0 0 36h-48a29.92 29.92 0 0 0 0-36Zm-90 18a18 18 0 1 1 18 18a18 18 0 0 1-18-18m114 18a18 18 0 1 1 18-18a18 18 0 0 1-18 18"/></svg>
</template>

CSS

.icon-cassette-tape-light {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M224%2050H32a14%2014%200%200%200-14%2014v128a14%2014%200%200%200%2014%2014h192a14%2014%200%200%200%2014-14V64a14%2014%200%200%200-14-14M76%20194l15-20h74l15%2020Zm150-2a2%202%200%200%201-2%202h-29l-22.2-29.6a6%206%200%200%200-4.8-2.4H88a6%206%200%200%200-4.8%202.4L61%20194H32a2%202%200%200%201-2-2V64a2%202%200%200%201%202-2h192a2%202%200%200%201%202%202ZM176%2082H80a30%2030%200%200%200%200%2060h96a30%2030%200%200%200%200-60m-24%2012a29.92%2029.92%200%200%200%200%2036h-48a29.92%2029.92%200%200%200%200-36Zm-90%2018a18%2018%200%201%201%2018%2018a18%2018%200%200%201-18-18m114%2018a18%2018%200%201%201%2018-18a18%2018%200%200%201-18%2018%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M224%2050H32a14%2014%200%200%200-14%2014v128a14%2014%200%200%200%2014%2014h192a14%2014%200%200%200%2014-14V64a14%2014%200%200%200-14-14M76%20194l15-20h74l15%2020Zm150-2a2%202%200%200%201-2%202h-29l-22.2-29.6a6%206%200%200%200-4.8-2.4H88a6%206%200%200%200-4.8%202.4L61%20194H32a2%202%200%200%201-2-2V64a2%202%200%200%201%202-2h192a2%202%200%200%201%202%202ZM176%2082H80a30%2030%200%200%200%200%2060h96a30%2030%200%200%200%200-60m-24%2012a29.92%2029.92%200%200%200%200%2036h-48a29.92%2029.92%200%200%200%200-36Zm-90%2018a18%2018%200%201%201%2018%2018a18%2018%200%200%201-18-18m114%2018a18%2018%200%201%201%2018-18a18%2018%200%200%201-18%2018%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/cassette-tape-light.svg?color=%231a73e8&size=48