zoom logo
zoom from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.
- Name
- zoom
- Set
- Simple Icons
- Style
- Brand
- Viewbox
- 24×24
- License
- CC0 1.0
The same logo in other sets
Use the zoom logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.033 14.649H.743a.74.74 0 0 1-.686-.458a.74.74 0 0 1 .16-.808L3.19 10.41H1.06A1.06 1.06 0 0 1 0 9.35h3.957c.301 0 .57.18.686.458a.74.74 0 0 1-.161.808L1.51 13.59h2.464c.585 0 1.06.475 1.06 1.06zM24 11.338a2.068 2.068 0 0 0-3.603-1.38a2.06 2.06 0 0 0-1.536-.686c-1.14 0-2.066.926-2.066 2.066v3.311a1.06 1.06 0 0 0 1.06-1.06v-2.251a1.004 1.004 0 0 1 2.013 0v2.251c0 .586.474 1.06 1.06 1.06v-3.311a1.004 1.004 0 0 1 2.012 0v2.251c0 .586.475 1.06 1.06 1.06zM16.265 12a2.728 2.728 0 1 1-5.457 0a2.728 2.728 0 0 1 5.457 0m-1.06 0a1.669 1.669 0 1 0-3.338 0a1.669 1.669 0 0 0 3.338 0m-4.82 0a2.728 2.728 0 1 1-5.458 0a2.728 2.728 0 0 1 5.457 0zm-1.06 0a1.669 1.669 0 1 0-3.338 0a1.669 1.669 0 0 0 3.338 0"/></svg>
React
import type { SVGProps } from "react";
export function SimpleIconsZoom(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="M5.033 14.649H.743a.74.74 0 0 1-.686-.458a.74.74 0 0 1 .16-.808L3.19 10.41H1.06A1.06 1.06 0 0 1 0 9.35h3.957c.301 0 .57.18.686.458a.74.74 0 0 1-.161.808L1.51 13.59h2.464c.585 0 1.06.475 1.06 1.06zM24 11.338a2.068 2.068 0 0 0-3.603-1.38a2.06 2.06 0 0 0-1.536-.686c-1.14 0-2.066.926-2.066 2.066v3.311a1.06 1.06 0 0 0 1.06-1.06v-2.251a1.004 1.004 0 0 1 2.013 0v2.251c0 .586.474 1.06 1.06 1.06v-3.311a1.004 1.004 0 0 1 2.012 0v2.251c0 .586.475 1.06 1.06 1.06zM16.265 12a2.728 2.728 0 1 1-5.457 0a2.728 2.728 0 0 1 5.457 0m-1.06 0a1.669 1.669 0 1 0-3.338 0a1.669 1.669 0 0 0 3.338 0m-4.82 0a2.728 2.728 0 1 1-5.458 0a2.728 2.728 0 0 1 5.457 0zm-1.06 0a1.669 1.669 0 1 0-3.338 0a1.669 1.669 0 0 0 3.338 0"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.033 14.649H.743a.74.74 0 0 1-.686-.458a.74.74 0 0 1 .16-.808L3.19 10.41H1.06A1.06 1.06 0 0 1 0 9.35h3.957c.301 0 .57.18.686.458a.74.74 0 0 1-.161.808L1.51 13.59h2.464c.585 0 1.06.475 1.06 1.06zM24 11.338a2.068 2.068 0 0 0-3.603-1.38a2.06 2.06 0 0 0-1.536-.686c-1.14 0-2.066.926-2.066 2.066v3.311a1.06 1.06 0 0 0 1.06-1.06v-2.251a1.004 1.004 0 0 1 2.013 0v2.251c0 .586.474 1.06 1.06 1.06v-3.311a1.004 1.004 0 0 1 2.012 0v2.251c0 .586.475 1.06 1.06 1.06zM16.265 12a2.728 2.728 0 1 1-5.457 0a2.728 2.728 0 0 1 5.457 0m-1.06 0a1.669 1.669 0 1 0-3.338 0a1.669 1.669 0 0 0 3.338 0m-4.82 0a2.728 2.728 0 1 1-5.458 0a2.728 2.728 0 0 1 5.457 0zm-1.06 0a1.669 1.669 0 1 0-3.338 0a1.669 1.669 0 0 0 3.338 0"/></svg> </template>
CSS
.icon-zoom {
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%22M5.033%2014.649H.743a.74.74%200%200%201-.686-.458a.74.74%200%200%201%20.16-.808L3.19%2010.41H1.06A1.06%201.06%200%200%201%200%209.35h3.957c.301%200%20.57.18.686.458a.74.74%200%200%201-.161.808L1.51%2013.59h2.464c.585%200%201.06.475%201.06%201.06zM24%2011.338a2.068%202.068%200%200%200-3.603-1.38a2.06%202.06%200%200%200-1.536-.686c-1.14%200-2.066.926-2.066%202.066v3.311a1.06%201.06%200%200%200%201.06-1.06v-2.251a1.004%201.004%200%200%201%202.013%200v2.251c0%20.586.474%201.06%201.06%201.06v-3.311a1.004%201.004%200%200%201%202.012%200v2.251c0%20.586.475%201.06%201.06%201.06zM16.265%2012a2.728%202.728%200%201%201-5.457%200a2.728%202.728%200%200%201%205.457%200m-1.06%200a1.669%201.669%200%201%200-3.338%200a1.669%201.669%200%200%200%203.338%200m-4.82%200a2.728%202.728%200%201%201-5.458%200a2.728%202.728%200%200%201%205.457%200zm-1.06%200a1.669%201.669%200%201%200-3.338%200a1.669%201.669%200%200%200%203.338%200%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%22M5.033%2014.649H.743a.74.74%200%200%201-.686-.458a.74.74%200%200%201%20.16-.808L3.19%2010.41H1.06A1.06%201.06%200%200%201%200%209.35h3.957c.301%200%20.57.18.686.458a.74.74%200%200%201-.161.808L1.51%2013.59h2.464c.585%200%201.06.475%201.06%201.06zM24%2011.338a2.068%202.068%200%200%200-3.603-1.38a2.06%202.06%200%200%200-1.536-.686c-1.14%200-2.066.926-2.066%202.066v3.311a1.06%201.06%200%200%200%201.06-1.06v-2.251a1.004%201.004%200%200%201%202.013%200v2.251c0%20.586.474%201.06%201.06%201.06v-3.311a1.004%201.004%200%200%201%202.012%200v2.251c0%20.586.475%201.06%201.06%201.06zM16.265%2012a2.728%202.728%200%201%201-5.457%200a2.728%202.728%200%200%201%205.457%200m-1.06%200a1.669%201.669%200%201%200-3.338%200a1.669%201.669%200%200%200%203.338%200m-4.82%200a2.728%202.728%200%201%201-5.458%200a2.728%202.728%200%200%201%205.457%200zm-1.06%200a1.669%201.669%200%201%200-3.338%200a1.669%201.669%200%200%200%203.338%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/simple-icons/zoom.svg?color=%231a73e8&size=48
