playpause icon
playpause from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- playpause
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
Use the playpause icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M39.06 47.053c1.067 0 1.93-.817 1.93-1.884V11.446a1.91 1.91 0 0 0-1.93-1.908c-1.068 0-1.954.84-1.954 1.908v33.723c0 1.067.886 1.884 1.953 1.884m15.01 0c1.067 0 1.93-.817 1.93-1.884V11.446a1.91 1.91 0 0 0-1.93-1.908c-1.067 0-1.953.84-1.953 1.908v33.723c0 1.067.886 1.884 1.953 1.884m-50.8-.908c.931 0 1.703-.295 2.612-.84l23.14-13.626c1.612-.953 2.316-2.089 2.316-3.383s-.704-2.43-2.316-3.384L5.882 11.287c-.931-.545-1.68-.84-2.612-.84c-1.77 0-3.27 1.362-3.27 3.906v27.886c0 2.544 1.499 3.906 3.27 3.906m1-4.201c-.341 0-.614-.227-.614-.681V15.329c0-.454.273-.681.613-.681c.16 0 .318.068.545.204L26.411 27.66c.317.182.499.318.499.636c0 .295-.182.454-.5.636L4.814 41.74q-.306.204-.545.204"/></svg>
React
import type { SVGProps } from "react";
export function F7Playpause(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M39.06 47.053c1.067 0 1.93-.817 1.93-1.884V11.446a1.91 1.91 0 0 0-1.93-1.908c-1.068 0-1.954.84-1.954 1.908v33.723c0 1.067.886 1.884 1.953 1.884m15.01 0c1.067 0 1.93-.817 1.93-1.884V11.446a1.91 1.91 0 0 0-1.93-1.908c-1.067 0-1.953.84-1.953 1.908v33.723c0 1.067.886 1.884 1.953 1.884m-50.8-.908c.931 0 1.703-.295 2.612-.84l23.14-13.626c1.612-.953 2.316-2.089 2.316-3.383s-.704-2.43-2.316-3.384L5.882 11.287c-.931-.545-1.68-.84-2.612-.84c-1.77 0-3.27 1.362-3.27 3.906v27.886c0 2.544 1.499 3.906 3.27 3.906m1-4.201c-.341 0-.614-.227-.614-.681V15.329c0-.454.273-.681.613-.681c.16 0 .318.068.545.204L26.411 27.66c.317.182.499.318.499.636c0 .295-.182.454-.5.636L4.814 41.74q-.306.204-.545.204"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M39.06 47.053c1.067 0 1.93-.817 1.93-1.884V11.446a1.91 1.91 0 0 0-1.93-1.908c-1.068 0-1.954.84-1.954 1.908v33.723c0 1.067.886 1.884 1.953 1.884m15.01 0c1.067 0 1.93-.817 1.93-1.884V11.446a1.91 1.91 0 0 0-1.93-1.908c-1.067 0-1.953.84-1.953 1.908v33.723c0 1.067.886 1.884 1.953 1.884m-50.8-.908c.931 0 1.703-.295 2.612-.84l23.14-13.626c1.612-.953 2.316-2.089 2.316-3.383s-.704-2.43-2.316-3.384L5.882 11.287c-.931-.545-1.68-.84-2.612-.84c-1.77 0-3.27 1.362-3.27 3.906v27.886c0 2.544 1.499 3.906 3.27 3.906m1-4.201c-.341 0-.614-.227-.614-.681V15.329c0-.454.273-.681.613-.681c.16 0 .318.068.545.204L26.411 27.66c.317.182.499.318.499.636c0 .295-.182.454-.5.636L4.814 41.74q-.306.204-.545.204"/></svg> </template>
CSS
.icon-playpause {
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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M39.06%2047.053c1.067%200%201.93-.817%201.93-1.884V11.446a1.91%201.91%200%200%200-1.93-1.908c-1.068%200-1.954.84-1.954%201.908v33.723c0%201.067.886%201.884%201.953%201.884m15.01%200c1.067%200%201.93-.817%201.93-1.884V11.446a1.91%201.91%200%200%200-1.93-1.908c-1.067%200-1.953.84-1.953%201.908v33.723c0%201.067.886%201.884%201.953%201.884m-50.8-.908c.931%200%201.703-.295%202.612-.84l23.14-13.626c1.612-.953%202.316-2.089%202.316-3.383s-.704-2.43-2.316-3.384L5.882%2011.287c-.931-.545-1.68-.84-2.612-.84c-1.77%200-3.27%201.362-3.27%203.906v27.886c0%202.544%201.499%203.906%203.27%203.906m1-4.201c-.341%200-.614-.227-.614-.681V15.329c0-.454.273-.681.613-.681c.16%200%20.318.068.545.204L26.411%2027.66c.317.182.499.318.499.636c0%20.295-.182.454-.5.636L4.814%2041.74q-.306.204-.545.204%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M39.06%2047.053c1.067%200%201.93-.817%201.93-1.884V11.446a1.91%201.91%200%200%200-1.93-1.908c-1.068%200-1.954.84-1.954%201.908v33.723c0%201.067.886%201.884%201.953%201.884m15.01%200c1.067%200%201.93-.817%201.93-1.884V11.446a1.91%201.91%200%200%200-1.93-1.908c-1.067%200-1.953.84-1.953%201.908v33.723c0%201.067.886%201.884%201.953%201.884m-50.8-.908c.931%200%201.703-.295%202.612-.84l23.14-13.626c1.612-.953%202.316-2.089%202.316-3.383s-.704-2.43-2.316-3.384L5.882%2011.287c-.931-.545-1.68-.84-2.612-.84c-1.77%200-3.27%201.362-3.27%203.906v27.886c0%202.544%201.499%203.906%203.27%203.906m1-4.201c-.341%200-.614-.227-.614-.681V15.329c0-.454.273-.681.613-.681c.16%200%20.318.068.545.204L26.411%2027.66c.317.182.499.318.499.636c0%20.295-.182.454-.5.636L4.814%2041.74q-.306.204-.545.204%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/playpause.svg?color=%231a73e8&size=48
