file type webp logo
file-type-webp from VSCode Icons by Roberto Huertas · Color · MIT Free for personal and commercial use.
- Name
- file-type-webp
- Set
- VSCode Icons
- Style
- Color
- Viewbox
- 32×32
- License
- MIT
Related icons in VSCode Icons
file-type-accessfile-type-access2file-type-actionscriptfile-type-actionscript2file-type-adafile-type-advplfile-type-affinityfile-type-affinitydesignerfile-type-affinityphotofile-type-affinitypublisherfile-type-agdafile-type-agentsfile-type-aifile-type-ai2file-type-aikidofile-type-alfile-type-al-dalfile-type-alchemyfile-type-allcontributorsfile-type-alloyfile-type-allurefile-type-angularfile-type-ansiblefile-type-antlers-html
Use the file type webp logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><defs><linearGradient id="svgIDa" x1="596.629" x2="599.481" y1="-820.523" y2="-826.534" gradientTransform="matrix(.366 0 0 -.366 -210.44 -292.295)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8ae234"/><stop offset="1" stop-color="#4e9a06"/></linearGradient><linearGradient id="svgIDc" x1="599.996" x2="631.107" y1="-815.078" y2="-868.963" href="#svgIDa"/><linearGradient id="svgIDd" x1="648.158" x2="677.021" y1="-1013.946" y2="-1071.027" gradientTransform="matrix(.347 0 0 -.339 -214.765 -336.913)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".549"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><radialGradient id="svgIDe" cx="572.646" cy="-769.85" r="14.375" gradientTransform="matrix(.358 0 0 -.358 -181.98 -268.597)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".5" stop-color="#fff520" stop-opacity=".891"/><stop offset="1" stop-color="#fff300" stop-opacity="0"/></radialGradient><filter id="svgIDb"><feGaussianBlur stdDeviation="1.275"/></filter></defs><g filter="url(#svgIDb)"><path fill-rule="evenodd" d="M4.646 8h22.707a1.976 1.976 0 0 1 1.981 1.971V25.96a1.977 1.977 0 0 1-1.972 1.981H4.646a1.976 1.976 0 0 1-1.98-1.972V9.978A1.976 1.976 0 0 1 4.637 8Z"/><path fill="none" stroke="#000" stroke-width="2.051" d="M4.646 8h22.707a1.976 1.976 0 0 1 1.981 1.971V25.96a1.977 1.977 0 0 1-1.972 1.981H4.646a1.976 1.976 0 0 1-1.98-1.972V9.978A1.976 1.976 0 0 1 4.637 8Z"/></g><path fill="url(#svgIDa)" fill-rule="evenodd" stroke="#366a04" stroke-width="2.902" d="M6.2 6.374h3.281v3.3H6.2Z"/><path fill="url(#svgIDc)" fill-rule="evenodd" stroke="#366a04" stroke-width="3.605" d="M4.646 8h22.707a1.977 1.977 0 0 1 1.981 1.972v15.989a1.977 1.977 0 0 1-1.972 1.98H4.646a1.976 1.976 0 0 1-1.98-1.972V9.978A1.976 1.976 0 0 1 4.638 8h.008Z"/><path fill="#fff" stroke="#366a04" stroke-width="3.605" d="M20.877 17.969A4.878 4.878 0 1 1 16 13.092a4.877 4.877 0 0 1 4.877 4.877Z"/><path fill="none" stroke="url(#svgIDd)" stroke-linejoin="round" stroke-width="3.38" d="M5.185 8.7h21.54c1.406 0 1.879.59 1.879 1.835V25.34c0 1.245-.518 1.834-1.879 1.834H5.185c-1.407 0-1.879-.544-1.879-1.834V10.534c0-1.382.609-1.834 1.879-1.834Z"/><circle cx="23.184" cy="7.22" r="5.15" fill="url(#svgIDe)"/></svg>
React
import type { SVGProps } from "react";
export function VscodeIconsFileTypeWebp(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><defs><linearGradient id="svgIDa" x1="596.629" x2="599.481" y1="-820.523" y2="-826.534" gradientTransform="matrix(.366 0 0 -.366 -210.44 -292.295)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#8ae234"/><stop offset="1" stopColor="#4e9a06"/></linearGradient><linearGradient id="svgIDc" x1="599.996" x2="631.107" y1="-815.078" y2="-868.963" href="#svgIDa"/><linearGradient id="svgIDd" x1="648.158" x2="677.021" y1="-1013.946" y2="-1071.027" gradientTransform="matrix(.347 0 0 -.339 -214.765 -336.913)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#fff" stopOpacity=".549"/><stop offset="1" stopColor="#fff" stopOpacity="0"/></linearGradient><radialGradient id="svgIDe" cx="572.646" cy="-769.85" r="14.375" gradientTransform="matrix(.358 0 0 -.358 -181.98 -268.597)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#fff"/><stop offset=".5" stopColor="#fff520" stopOpacity=".891"/><stop offset="1" stopColor="#fff300" stopOpacity="0"/></radialGradient><filter id="svgIDb"><feGaussianBlur stdDeviation="1.275"/></filter></defs><g filter="url(#svgIDb)"><path fillRule="evenodd" d="M4.646 8h22.707a1.976 1.976 0 0 1 1.981 1.971V25.96a1.977 1.977 0 0 1-1.972 1.981H4.646a1.976 1.976 0 0 1-1.98-1.972V9.978A1.976 1.976 0 0 1 4.637 8Z"/><path fill="none" stroke="#000" strokeWidth="2.051" d="M4.646 8h22.707a1.976 1.976 0 0 1 1.981 1.971V25.96a1.977 1.977 0 0 1-1.972 1.981H4.646a1.976 1.976 0 0 1-1.98-1.972V9.978A1.976 1.976 0 0 1 4.637 8Z"/></g><path fill="url(#svgIDa)" fillRule="evenodd" stroke="#366a04" strokeWidth="2.902" d="M6.2 6.374h3.281v3.3H6.2Z"/><path fill="url(#svgIDc)" fillRule="evenodd" stroke="#366a04" strokeWidth="3.605" d="M4.646 8h22.707a1.977 1.977 0 0 1 1.981 1.972v15.989a1.977 1.977 0 0 1-1.972 1.98H4.646a1.976 1.976 0 0 1-1.98-1.972V9.978A1.976 1.976 0 0 1 4.638 8h.008Z"/><path fill="#fff" stroke="#366a04" strokeWidth="3.605" d="M20.877 17.969A4.878 4.878 0 1 1 16 13.092a4.877 4.877 0 0 1 4.877 4.877Z"/><path fill="none" stroke="url(#svgIDd)" strokeLinejoin="round" strokeWidth="3.38" d="M5.185 8.7h21.54c1.406 0 1.879.59 1.879 1.835V25.34c0 1.245-.518 1.834-1.879 1.834H5.185c-1.407 0-1.879-.544-1.879-1.834V10.534c0-1.382.609-1.834 1.879-1.834Z"/><circle cx="23.184" cy="7.22" r="5.15" fill="url(#svgIDe)"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><defs><linearGradient id="svgIDa" x1="596.629" x2="599.481" y1="-820.523" y2="-826.534" gradientTransform="matrix(.366 0 0 -.366 -210.44 -292.295)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8ae234"/><stop offset="1" stop-color="#4e9a06"/></linearGradient><linearGradient id="svgIDc" x1="599.996" x2="631.107" y1="-815.078" y2="-868.963" href="#svgIDa"/><linearGradient id="svgIDd" x1="648.158" x2="677.021" y1="-1013.946" y2="-1071.027" gradientTransform="matrix(.347 0 0 -.339 -214.765 -336.913)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".549"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><radialGradient id="svgIDe" cx="572.646" cy="-769.85" r="14.375" gradientTransform="matrix(.358 0 0 -.358 -181.98 -268.597)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".5" stop-color="#fff520" stop-opacity=".891"/><stop offset="1" stop-color="#fff300" stop-opacity="0"/></radialGradient><filter id="svgIDb"><feGaussianBlur stdDeviation="1.275"/></filter></defs><g filter="url(#svgIDb)"><path fill-rule="evenodd" d="M4.646 8h22.707a1.976 1.976 0 0 1 1.981 1.971V25.96a1.977 1.977 0 0 1-1.972 1.981H4.646a1.976 1.976 0 0 1-1.98-1.972V9.978A1.976 1.976 0 0 1 4.637 8Z"/><path fill="none" stroke="#000" stroke-width="2.051" d="M4.646 8h22.707a1.976 1.976 0 0 1 1.981 1.971V25.96a1.977 1.977 0 0 1-1.972 1.981H4.646a1.976 1.976 0 0 1-1.98-1.972V9.978A1.976 1.976 0 0 1 4.637 8Z"/></g><path fill="url(#svgIDa)" fill-rule="evenodd" stroke="#366a04" stroke-width="2.902" d="M6.2 6.374h3.281v3.3H6.2Z"/><path fill="url(#svgIDc)" fill-rule="evenodd" stroke="#366a04" stroke-width="3.605" d="M4.646 8h22.707a1.977 1.977 0 0 1 1.981 1.972v15.989a1.977 1.977 0 0 1-1.972 1.98H4.646a1.976 1.976 0 0 1-1.98-1.972V9.978A1.976 1.976 0 0 1 4.638 8h.008Z"/><path fill="#fff" stroke="#366a04" stroke-width="3.605" d="M20.877 17.969A4.878 4.878 0 1 1 16 13.092a4.877 4.877 0 0 1 4.877 4.877Z"/><path fill="none" stroke="url(#svgIDd)" stroke-linejoin="round" stroke-width="3.38" d="M5.185 8.7h21.54c1.406 0 1.879.59 1.879 1.835V25.34c0 1.245-.518 1.834-1.879 1.834H5.185c-1.407 0-1.879-.544-1.879-1.834V10.534c0-1.382.609-1.834 1.879-1.834Z"/><circle cx="23.184" cy="7.22" r="5.15" fill="url(#svgIDe)"/></svg> </template>
CSS
.icon-file-type-webp {
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%2032%2032%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22svgIDa%22%20x1%3D%22596.629%22%20x2%3D%22599.481%22%20y1%3D%22-820.523%22%20y2%3D%22-826.534%22%20gradientTransform%3D%22matrix(.366%200%200%20-.366%20-210.44%20-292.295)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238ae234%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234e9a06%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgIDc%22%20x1%3D%22599.996%22%20x2%3D%22631.107%22%20y1%3D%22-815.078%22%20y2%3D%22-868.963%22%20href%3D%22%23svgIDa%22%2F%3E%3ClinearGradient%20id%3D%22svgIDd%22%20x1%3D%22648.158%22%20x2%3D%22677.021%22%20y1%3D%22-1013.946%22%20y2%3D%22-1071.027%22%20gradientTransform%3D%22matrix(.347%200%200%20-.339%20-214.765%20-336.913)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.549%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22svgIDe%22%20cx%3D%22572.646%22%20cy%3D%22-769.85%22%20r%3D%2214.375%22%20gradientTransform%3D%22matrix(.358%200%200%20-.358%20-181.98%20-268.597)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23fff520%22%20stop-opacity%3D%22.891%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff300%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22svgIDb%22%3E%3CfeGaussianBlur%20stdDeviation%3D%221.275%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23svgIDb)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4.646%208h22.707a1.976%201.976%200%200%201%201.981%201.971V25.96a1.977%201.977%200%200%201-1.972%201.981H4.646a1.976%201.976%200%200%201-1.98-1.972V9.978A1.976%201.976%200%200%201%204.637%208Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.051%22%20d%3D%22M4.646%208h22.707a1.976%201.976%200%200%201%201.981%201.971V25.96a1.977%201.977%200%200%201-1.972%201.981H4.646a1.976%201.976%200%200%201-1.98-1.972V9.978A1.976%201.976%200%200%201%204.637%208Z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22url(%23svgIDa)%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23366a04%22%20stroke-width%3D%222.902%22%20d%3D%22M6.2%206.374h3.281v3.3H6.2Z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgIDc)%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23366a04%22%20stroke-width%3D%223.605%22%20d%3D%22M4.646%208h22.707a1.977%201.977%200%200%201%201.981%201.972v15.989a1.977%201.977%200%200%201-1.972%201.98H4.646a1.976%201.976%200%200%201-1.98-1.972V9.978A1.976%201.976%200%200%201%204.638%208h.008Z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%23366a04%22%20stroke-width%3D%223.605%22%20d%3D%22M20.877%2017.969A4.878%204.878%200%201%201%2016%2013.092a4.877%204.877%200%200%201%204.877%204.877Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22url(%23svgIDd)%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%223.38%22%20d%3D%22M5.185%208.7h21.54c1.406%200%201.879.59%201.879%201.835V25.34c0%201.245-.518%201.834-1.879%201.834H5.185c-1.407%200-1.879-.544-1.879-1.834V10.534c0-1.382.609-1.834%201.879-1.834Z%22%2F%3E%3Ccircle%20cx%3D%2223.184%22%20cy%3D%227.22%22%20r%3D%225.15%22%20fill%3D%22url(%23svgIDe)%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%2032%2032%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22svgIDa%22%20x1%3D%22596.629%22%20x2%3D%22599.481%22%20y1%3D%22-820.523%22%20y2%3D%22-826.534%22%20gradientTransform%3D%22matrix(.366%200%200%20-.366%20-210.44%20-292.295)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238ae234%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234e9a06%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22svgIDc%22%20x1%3D%22599.996%22%20x2%3D%22631.107%22%20y1%3D%22-815.078%22%20y2%3D%22-868.963%22%20href%3D%22%23svgIDa%22%2F%3E%3ClinearGradient%20id%3D%22svgIDd%22%20x1%3D%22648.158%22%20x2%3D%22677.021%22%20y1%3D%22-1013.946%22%20y2%3D%22-1071.027%22%20gradientTransform%3D%22matrix(.347%200%200%20-.339%20-214.765%20-336.913)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.549%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22svgIDe%22%20cx%3D%22572.646%22%20cy%3D%22-769.85%22%20r%3D%2214.375%22%20gradientTransform%3D%22matrix(.358%200%200%20-.358%20-181.98%20-268.597)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23fff520%22%20stop-opacity%3D%22.891%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff300%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3Cfilter%20id%3D%22svgIDb%22%3E%3CfeGaussianBlur%20stdDeviation%3D%221.275%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23svgIDb)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4.646%208h22.707a1.976%201.976%200%200%201%201.981%201.971V25.96a1.977%201.977%200%200%201-1.972%201.981H4.646a1.976%201.976%200%200%201-1.98-1.972V9.978A1.976%201.976%200%200%201%204.637%208Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.051%22%20d%3D%22M4.646%208h22.707a1.976%201.976%200%200%201%201.981%201.971V25.96a1.977%201.977%200%200%201-1.972%201.981H4.646a1.976%201.976%200%200%201-1.98-1.972V9.978A1.976%201.976%200%200%201%204.637%208Z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22url(%23svgIDa)%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23366a04%22%20stroke-width%3D%222.902%22%20d%3D%22M6.2%206.374h3.281v3.3H6.2Z%22%2F%3E%3Cpath%20fill%3D%22url(%23svgIDc)%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23366a04%22%20stroke-width%3D%223.605%22%20d%3D%22M4.646%208h22.707a1.977%201.977%200%200%201%201.981%201.972v15.989a1.977%201.977%200%200%201-1.972%201.98H4.646a1.976%201.976%200%200%201-1.98-1.972V9.978A1.976%201.976%200%200%201%204.638%208h.008Z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%23366a04%22%20stroke-width%3D%223.605%22%20d%3D%22M20.877%2017.969A4.878%204.878%200%201%201%2016%2013.092a4.877%204.877%200%200%201%204.877%204.877Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22url(%23svgIDd)%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%223.38%22%20d%3D%22M5.185%208.7h21.54c1.406%200%201.879.59%201.879%201.835V25.34c0%201.245-.518%201.834-1.879%201.834H5.185c-1.407%200-1.879-.544-1.879-1.834V10.534c0-1.382.609-1.834%201.879-1.834Z%22%2F%3E%3Ccircle%20cx%3D%2223.184%22%20cy%3D%227.22%22%20r%3D%225.15%22%20fill%3D%22url(%23svgIDe)%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/vscode-icons/file-type-webp.svg?color=%231a73e8&size=48
