compression icon
compression from IconPark by ByteDance · Color · Office · Apache-2.0 Free for personal and commercial use.
- Name
- compression
- Set
- IconPark
- Style
- Color
- Category
- Office
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
More office icons from IconPark
Use the compression icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke-linecap="round" stroke-width="4"><path fill="#2F88FF" stroke="#000" stroke-linejoin="round" d="M8.91962 8.7141C8.49508 7.38938 9.47567 6 10.8668 6H37.1332C38.5243 6 39.5049 7.38938 39.0804 8.7141C37.8993 12.3995 36 19.0894 36 24C36 28.9106 37.8993 35.6005 39.0804 39.2859C39.5049 40.6106 38.5243 42 37.1332 42H10.8668C9.47567 42 8.49508 40.6106 8.91962 39.2859C10.1007 35.6005 12 28.9106 12 24C12 19.0894 10.1007 12.3995 8.91962 8.7141Z"/><path stroke="#000" stroke-linejoin="round" d="M4 15C5.5 17 5.99988 21 5.99988 24C5.99988 27 5.5 31 4 33"/><path stroke="#fff" d="M18 15.5H30"/><path stroke="#fff" d="M18 24H30"/><path stroke="#fff" d="M18 32H22"/><path stroke="#000" stroke-linejoin="round" d="M44 15C42.5 17 42.0001 21 42.0001 24C42.0001 27 42.5 30 44 33"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkCompression(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" strokeLinecap="round" strokeWidth="4"><path fill="#2F88FF" stroke="#000" strokeLinejoin="round" d="M8.91962 8.7141C8.49508 7.38938 9.47567 6 10.8668 6H37.1332C38.5243 6 39.5049 7.38938 39.0804 8.7141C37.8993 12.3995 36 19.0894 36 24C36 28.9106 37.8993 35.6005 39.0804 39.2859C39.5049 40.6106 38.5243 42 37.1332 42H10.8668C9.47567 42 8.49508 40.6106 8.91962 39.2859C10.1007 35.6005 12 28.9106 12 24C12 19.0894 10.1007 12.3995 8.91962 8.7141Z"/><path stroke="#000" strokeLinejoin="round" d="M4 15C5.5 17 5.99988 21 5.99988 24C5.99988 27 5.5 31 4 33"/><path stroke="#fff" d="M18 15.5H30"/><path stroke="#fff" d="M18 24H30"/><path stroke="#fff" d="M18 32H22"/><path stroke="#000" strokeLinejoin="round" d="M44 15C42.5 17 42.0001 21 42.0001 24C42.0001 27 42.5 30 44 33"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke-linecap="round" stroke-width="4"><path fill="#2F88FF" stroke="#000" stroke-linejoin="round" d="M8.91962 8.7141C8.49508 7.38938 9.47567 6 10.8668 6H37.1332C38.5243 6 39.5049 7.38938 39.0804 8.7141C37.8993 12.3995 36 19.0894 36 24C36 28.9106 37.8993 35.6005 39.0804 39.2859C39.5049 40.6106 38.5243 42 37.1332 42H10.8668C9.47567 42 8.49508 40.6106 8.91962 39.2859C10.1007 35.6005 12 28.9106 12 24C12 19.0894 10.1007 12.3995 8.91962 8.7141Z"/><path stroke="#000" stroke-linejoin="round" d="M4 15C5.5 17 5.99988 21 5.99988 24C5.99988 27 5.5 31 4 33"/><path stroke="#fff" d="M18 15.5H30"/><path stroke="#fff" d="M18 24H30"/><path stroke="#fff" d="M18 32H22"/><path stroke="#000" stroke-linejoin="round" d="M44 15C42.5 17 42.0001 21 42.0001 24C42.0001 27 42.5 30 44 33"/></g></svg> </template>
CSS
.icon-compression {
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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20d%3D%22M8.91962%208.7141C8.49508%207.38938%209.47567%206%2010.8668%206H37.1332C38.5243%206%2039.5049%207.38938%2039.0804%208.7141C37.8993%2012.3995%2036%2019.0894%2036%2024C36%2028.9106%2037.8993%2035.6005%2039.0804%2039.2859C39.5049%2040.6106%2038.5243%2042%2037.1332%2042H10.8668C9.47567%2042%208.49508%2040.6106%208.91962%2039.2859C10.1007%2035.6005%2012%2028.9106%2012%2024C12%2019.0894%2010.1007%2012.3995%208.91962%208.7141Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20d%3D%22M4%2015C5.5%2017%205.99988%2021%205.99988%2024C5.99988%2027%205.5%2031%204%2033%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M18%2015.5H30%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M18%2024H30%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M18%2032H22%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20d%3D%22M44%2015C42.5%2017%2042.0001%2021%2042.0001%2024C42.0001%2027%2042.5%2030%2044%2033%22%2F%3E%3C%2Fg%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20d%3D%22M8.91962%208.7141C8.49508%207.38938%209.47567%206%2010.8668%206H37.1332C38.5243%206%2039.5049%207.38938%2039.0804%208.7141C37.8993%2012.3995%2036%2019.0894%2036%2024C36%2028.9106%2037.8993%2035.6005%2039.0804%2039.2859C39.5049%2040.6106%2038.5243%2042%2037.1332%2042H10.8668C9.47567%2042%208.49508%2040.6106%208.91962%2039.2859C10.1007%2035.6005%2012%2028.9106%2012%2024C12%2019.0894%2010.1007%2012.3995%208.91962%208.7141Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20d%3D%22M4%2015C5.5%2017%205.99988%2021%205.99988%2024C5.99988%2027%205.5%2031%204%2033%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M18%2015.5H30%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M18%2024H30%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M18%2032H22%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20d%3D%22M44%2015C42.5%2017%2042.0001%2021%2042.0001%2024C42.0001%2027%2042.5%2030%2044%2033%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/compression.svg?color=%231a73e8&size=48
