perspective icon
perspective from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- perspective
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
The same icon in other sets
Use the perspective icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M1.873 29.756H8.1v7.187c0 3.91 2.482 6.228 7.117 7.047l11.004 1.92v8.217C26.22 55.274 26.9 56 28 56c1.077 0 1.756-.726 1.756-1.873v-7.585l11.026 1.92c4.449.795 7.118-1.99 7.118-7.024V29.756h6.227c1.147 0 1.873-.68 1.873-1.756c0-1.1-.726-1.78-1.873-1.78H47.9V14.563c0-5.268-2.482-7.843-7.117-7.047L29.755 9.458V1.873C29.756.703 29.076.1 28 .1c-1.1 0-1.78.602-1.78 1.773v8.194L15.218 12.01c-4.635.82-7.117 3.114-7.117 7.024v7.187H1.873C.703 26.22 0 26.9 0 28c0 1.076.702 1.755 1.873 1.755M40.946 11.05c2.248-.374 3.418.89 3.418 3.465v11.706H29.756V12.993Zm-29.31 7.937c0-1.967 1.17-3.09 3.418-3.465l11.167-1.92v12.619H11.635Zm3.418 21.468c-2.248-.351-3.419-1.475-3.419-3.465v-7.234h14.586v12.642Zm25.892 4.495l-11.19-1.943V29.756h14.608v11.729c0 2.482-1.24 3.84-3.418 3.465"/></svg>
React
import type { SVGProps } from "react";
export function F7Perspective(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="M1.873 29.756H8.1v7.187c0 3.91 2.482 6.228 7.117 7.047l11.004 1.92v8.217C26.22 55.274 26.9 56 28 56c1.077 0 1.756-.726 1.756-1.873v-7.585l11.026 1.92c4.449.795 7.118-1.99 7.118-7.024V29.756h6.227c1.147 0 1.873-.68 1.873-1.756c0-1.1-.726-1.78-1.873-1.78H47.9V14.563c0-5.268-2.482-7.843-7.117-7.047L29.755 9.458V1.873C29.756.703 29.076.1 28 .1c-1.1 0-1.78.602-1.78 1.773v8.194L15.218 12.01c-4.635.82-7.117 3.114-7.117 7.024v7.187H1.873C.703 26.22 0 26.9 0 28c0 1.076.702 1.755 1.873 1.755M40.946 11.05c2.248-.374 3.418.89 3.418 3.465v11.706H29.756V12.993Zm-29.31 7.937c0-1.967 1.17-3.09 3.418-3.465l11.167-1.92v12.619H11.635Zm3.418 21.468c-2.248-.351-3.419-1.475-3.419-3.465v-7.234h14.586v12.642Zm25.892 4.495l-11.19-1.943V29.756h14.608v11.729c0 2.482-1.24 3.84-3.418 3.465"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M1.873 29.756H8.1v7.187c0 3.91 2.482 6.228 7.117 7.047l11.004 1.92v8.217C26.22 55.274 26.9 56 28 56c1.077 0 1.756-.726 1.756-1.873v-7.585l11.026 1.92c4.449.795 7.118-1.99 7.118-7.024V29.756h6.227c1.147 0 1.873-.68 1.873-1.756c0-1.1-.726-1.78-1.873-1.78H47.9V14.563c0-5.268-2.482-7.843-7.117-7.047L29.755 9.458V1.873C29.756.703 29.076.1 28 .1c-1.1 0-1.78.602-1.78 1.773v8.194L15.218 12.01c-4.635.82-7.117 3.114-7.117 7.024v7.187H1.873C.703 26.22 0 26.9 0 28c0 1.076.702 1.755 1.873 1.755M40.946 11.05c2.248-.374 3.418.89 3.418 3.465v11.706H29.756V12.993Zm-29.31 7.937c0-1.967 1.17-3.09 3.418-3.465l11.167-1.92v12.619H11.635Zm3.418 21.468c-2.248-.351-3.419-1.475-3.419-3.465v-7.234h14.586v12.642Zm25.892 4.495l-11.19-1.943V29.756h14.608v11.729c0 2.482-1.24 3.84-3.418 3.465"/></svg> </template>
CSS
.icon-perspective {
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%22M1.873%2029.756H8.1v7.187c0%203.91%202.482%206.228%207.117%207.047l11.004%201.92v8.217C26.22%2055.274%2026.9%2056%2028%2056c1.077%200%201.756-.726%201.756-1.873v-7.585l11.026%201.92c4.449.795%207.118-1.99%207.118-7.024V29.756h6.227c1.147%200%201.873-.68%201.873-1.756c0-1.1-.726-1.78-1.873-1.78H47.9V14.563c0-5.268-2.482-7.843-7.117-7.047L29.755%209.458V1.873C29.756.703%2029.076.1%2028%20.1c-1.1%200-1.78.602-1.78%201.773v8.194L15.218%2012.01c-4.635.82-7.117%203.114-7.117%207.024v7.187H1.873C.703%2026.22%200%2026.9%200%2028c0%201.076.702%201.755%201.873%201.755M40.946%2011.05c2.248-.374%203.418.89%203.418%203.465v11.706H29.756V12.993Zm-29.31%207.937c0-1.967%201.17-3.09%203.418-3.465l11.167-1.92v12.619H11.635Zm3.418%2021.468c-2.248-.351-3.419-1.475-3.419-3.465v-7.234h14.586v12.642Zm25.892%204.495l-11.19-1.943V29.756h14.608v11.729c0%202.482-1.24%203.84-3.418%203.465%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%22M1.873%2029.756H8.1v7.187c0%203.91%202.482%206.228%207.117%207.047l11.004%201.92v8.217C26.22%2055.274%2026.9%2056%2028%2056c1.077%200%201.756-.726%201.756-1.873v-7.585l11.026%201.92c4.449.795%207.118-1.99%207.118-7.024V29.756h6.227c1.147%200%201.873-.68%201.873-1.756c0-1.1-.726-1.78-1.873-1.78H47.9V14.563c0-5.268-2.482-7.843-7.117-7.047L29.755%209.458V1.873C29.756.703%2029.076.1%2028%20.1c-1.1%200-1.78.602-1.78%201.773v8.194L15.218%2012.01c-4.635.82-7.117%203.114-7.117%207.024v7.187H1.873C.703%2026.22%200%2026.9%200%2028c0%201.076.702%201.755%201.873%201.755M40.946%2011.05c2.248-.374%203.418.89%203.418%203.465v11.706H29.756V12.993Zm-29.31%207.937c0-1.967%201.17-3.09%203.418-3.465l11.167-1.92v12.619H11.635Zm3.418%2021.468c-2.248-.351-3.419-1.475-3.419-3.465v-7.234h14.586v12.642Zm25.892%204.495l-11.19-1.943V29.756h14.608v11.729c0%202.482-1.24%203.84-3.418%203.465%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/perspective.svg?color=%231a73e8&size=48
