file type stylable logo
file-type-stylable from VSCode Icons by Roberto Huertas · Color · MIT Free for personal and commercial use.
- Name
- file-type-stylable
- 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 stylable logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><defs><linearGradient id="SVGXn4mTbxv" x1="-1947.843" x2="-1947.706" y1="-2006.674" y2="-2005.516" gradientTransform="matrix(12.867 0 0 21.023 25072.473 42188.473)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7ad852"/><stop offset=".536" stop-color="#3ab38b"/><stop offset="1" stop-color="#00bfc9"/></linearGradient><linearGradient id="SVGuU6TZDMX" x1="-1958.897" x2="-1959.478" y1="-1999.713" y2="-1998.526" gradientTransform="matrix(12.805 0 0 21.012 25107.678 42025.3)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff2953"/><stop offset="1" stop-color="#ea3333"/></linearGradient></defs><path fill="url(#SVGXn4mTbxv)" d="M10.944 2.5c-2.4 1-7.893 5.995-7.893 9.991c0 4.1 5.5 8.992 7.893 9.991a7.1 7.1 0 0 0 2.3.5a2.9 2.9 0 0 0 2.2-1.2a3.03 3.03 0 0 0-.5-4.5c-1.9-1.3-3.4-2.5-3.5-4.8c0-2.3 1.6-3.9 3.5-5.2a2.673 2.673 0 0 0 .7-4.2a3.01 3.01 0 0 0-2.4-1.1a7.1 7.1 0 0 0-2.3.518"/><path fill="#005892" d="M15.44 21.882a2.97 2.97 0 0 0-.5-4.5c-2.3-1.5-3.5-3-3.5-4.9a5.6 5.6 0 0 1 1.8-3.9c-5.3 5.695-5.995 11.989-.9 14.287a2.745 2.745 0 0 0 3.1-.987"/><path fill="#00418e" d="M13.042 19.784a2.325 2.325 0 0 0-.3-3.1a4.77 4.77 0 0 1-1.7-4a4.26 4.26 0 0 1 1.1-2.7c-3.4 3.9-4.4 8.992-1.1 10.591a1.92 1.92 0 0 0 2-.791"/><path fill="#002355" d="M11.543 18.285a1.54 1.54 0 0 0-.2-2a3.33 3.33 0 0 1-1.1-2.6c0-.9.3-1.8-.2-.7s-1.9 4.7.2 5.695a1.13 1.13 0 0 0 1.3-.395"/><path fill="url(#SVGuU6TZDMX)" d="M18.758 30a3.15 3.15 0 0 1-2.4-1.1a2.673 2.673 0 0 1 .7-4.2c1.9-1.3 3.4-2.9 3.5-5.2c0-2.3-1.6-3.8-3.5-5.2a2.9 2.9 0 0 1-.7-4.3a3.15 3.15 0 0 1 2.4-1.1a6.6 6.6 0 0 1 2.3.5c2.4 1 7.793 5.895 7.893 9.991c0 3.9-5.5 8.992-7.893 9.991a5.2 5.2 0 0 1-2.3.618"/><path fill="#470000" d="M16.26 10.018a2.82 2.82 0 0 0 .8 4.3c2.3 1.6 3.4 3.3 3.4 5.2a5.6 5.6 0 0 1-1.8 3.9c5.5-3.9 5.995-11.989.9-14.287a3.04 3.04 0 0 0-3.3.887" opacity=".6"/><path fill="#670010" d="M19.258 12.016a2.224 2.224 0 0 0 .3 3.1a4.77 4.77 0 0 1 1.7 4a4.1 4.1 0 0 1-.5 2.4c2.7-3 3.6-8.792.4-10.191a1.54 1.54 0 0 0-1.9.691"/><path fill="#730000" d="M20.756 13.515a1.54 1.54 0 0 0 .2 2a4.3 4.3 0 0 1 1.3 2.5a5 5 0 0 1-.1 1.3c.4-.7 2.2-5.6-.1-6.294a1.38 1.38 0 0 0-1.3.494"/></svg>
React
import type { SVGProps } from "react";
export function VscodeIconsFileTypeStylable(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="SVGXn4mTbxv" x1="-1947.843" x2="-1947.706" y1="-2006.674" y2="-2005.516" gradientTransform="matrix(12.867 0 0 21.023 25072.473 42188.473)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#7ad852"/><stop offset=".536" stopColor="#3ab38b"/><stop offset="1" stopColor="#00bfc9"/></linearGradient><linearGradient id="SVGuU6TZDMX" x1="-1958.897" x2="-1959.478" y1="-1999.713" y2="-1998.526" gradientTransform="matrix(12.805 0 0 21.012 25107.678 42025.3)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#ff2953"/><stop offset="1" stopColor="#ea3333"/></linearGradient></defs><path fill="url(#SVGXn4mTbxv)" d="M10.944 2.5c-2.4 1-7.893 5.995-7.893 9.991c0 4.1 5.5 8.992 7.893 9.991a7.1 7.1 0 0 0 2.3.5a2.9 2.9 0 0 0 2.2-1.2a3.03 3.03 0 0 0-.5-4.5c-1.9-1.3-3.4-2.5-3.5-4.8c0-2.3 1.6-3.9 3.5-5.2a2.673 2.673 0 0 0 .7-4.2a3.01 3.01 0 0 0-2.4-1.1a7.1 7.1 0 0 0-2.3.518"/><path fill="#005892" d="M15.44 21.882a2.97 2.97 0 0 0-.5-4.5c-2.3-1.5-3.5-3-3.5-4.9a5.6 5.6 0 0 1 1.8-3.9c-5.3 5.695-5.995 11.989-.9 14.287a2.745 2.745 0 0 0 3.1-.987"/><path fill="#00418e" d="M13.042 19.784a2.325 2.325 0 0 0-.3-3.1a4.77 4.77 0 0 1-1.7-4a4.26 4.26 0 0 1 1.1-2.7c-3.4 3.9-4.4 8.992-1.1 10.591a1.92 1.92 0 0 0 2-.791"/><path fill="#002355" d="M11.543 18.285a1.54 1.54 0 0 0-.2-2a3.33 3.33 0 0 1-1.1-2.6c0-.9.3-1.8-.2-.7s-1.9 4.7.2 5.695a1.13 1.13 0 0 0 1.3-.395"/><path fill="url(#SVGuU6TZDMX)" d="M18.758 30a3.15 3.15 0 0 1-2.4-1.1a2.673 2.673 0 0 1 .7-4.2c1.9-1.3 3.4-2.9 3.5-5.2c0-2.3-1.6-3.8-3.5-5.2a2.9 2.9 0 0 1-.7-4.3a3.15 3.15 0 0 1 2.4-1.1a6.6 6.6 0 0 1 2.3.5c2.4 1 7.793 5.895 7.893 9.991c0 3.9-5.5 8.992-7.893 9.991a5.2 5.2 0 0 1-2.3.618"/><path fill="#470000" d="M16.26 10.018a2.82 2.82 0 0 0 .8 4.3c2.3 1.6 3.4 3.3 3.4 5.2a5.6 5.6 0 0 1-1.8 3.9c5.5-3.9 5.995-11.989.9-14.287a3.04 3.04 0 0 0-3.3.887" opacity=".6"/><path fill="#670010" d="M19.258 12.016a2.224 2.224 0 0 0 .3 3.1a4.77 4.77 0 0 1 1.7 4a4.1 4.1 0 0 1-.5 2.4c2.7-3 3.6-8.792.4-10.191a1.54 1.54 0 0 0-1.9.691"/><path fill="#730000" d="M20.756 13.515a1.54 1.54 0 0 0 .2 2a4.3 4.3 0 0 1 1.3 2.5a5 5 0 0 1-.1 1.3c.4-.7 2.2-5.6-.1-6.294a1.38 1.38 0 0 0-1.3.494"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><defs><linearGradient id="SVGXn4mTbxv" x1="-1947.843" x2="-1947.706" y1="-2006.674" y2="-2005.516" gradientTransform="matrix(12.867 0 0 21.023 25072.473 42188.473)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7ad852"/><stop offset=".536" stop-color="#3ab38b"/><stop offset="1" stop-color="#00bfc9"/></linearGradient><linearGradient id="SVGuU6TZDMX" x1="-1958.897" x2="-1959.478" y1="-1999.713" y2="-1998.526" gradientTransform="matrix(12.805 0 0 21.012 25107.678 42025.3)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff2953"/><stop offset="1" stop-color="#ea3333"/></linearGradient></defs><path fill="url(#SVGXn4mTbxv)" d="M10.944 2.5c-2.4 1-7.893 5.995-7.893 9.991c0 4.1 5.5 8.992 7.893 9.991a7.1 7.1 0 0 0 2.3.5a2.9 2.9 0 0 0 2.2-1.2a3.03 3.03 0 0 0-.5-4.5c-1.9-1.3-3.4-2.5-3.5-4.8c0-2.3 1.6-3.9 3.5-5.2a2.673 2.673 0 0 0 .7-4.2a3.01 3.01 0 0 0-2.4-1.1a7.1 7.1 0 0 0-2.3.518"/><path fill="#005892" d="M15.44 21.882a2.97 2.97 0 0 0-.5-4.5c-2.3-1.5-3.5-3-3.5-4.9a5.6 5.6 0 0 1 1.8-3.9c-5.3 5.695-5.995 11.989-.9 14.287a2.745 2.745 0 0 0 3.1-.987"/><path fill="#00418e" d="M13.042 19.784a2.325 2.325 0 0 0-.3-3.1a4.77 4.77 0 0 1-1.7-4a4.26 4.26 0 0 1 1.1-2.7c-3.4 3.9-4.4 8.992-1.1 10.591a1.92 1.92 0 0 0 2-.791"/><path fill="#002355" d="M11.543 18.285a1.54 1.54 0 0 0-.2-2a3.33 3.33 0 0 1-1.1-2.6c0-.9.3-1.8-.2-.7s-1.9 4.7.2 5.695a1.13 1.13 0 0 0 1.3-.395"/><path fill="url(#SVGuU6TZDMX)" d="M18.758 30a3.15 3.15 0 0 1-2.4-1.1a2.673 2.673 0 0 1 .7-4.2c1.9-1.3 3.4-2.9 3.5-5.2c0-2.3-1.6-3.8-3.5-5.2a2.9 2.9 0 0 1-.7-4.3a3.15 3.15 0 0 1 2.4-1.1a6.6 6.6 0 0 1 2.3.5c2.4 1 7.793 5.895 7.893 9.991c0 3.9-5.5 8.992-7.893 9.991a5.2 5.2 0 0 1-2.3.618"/><path fill="#470000" d="M16.26 10.018a2.82 2.82 0 0 0 .8 4.3c2.3 1.6 3.4 3.3 3.4 5.2a5.6 5.6 0 0 1-1.8 3.9c5.5-3.9 5.995-11.989.9-14.287a3.04 3.04 0 0 0-3.3.887" opacity=".6"/><path fill="#670010" d="M19.258 12.016a2.224 2.224 0 0 0 .3 3.1a4.77 4.77 0 0 1 1.7 4a4.1 4.1 0 0 1-.5 2.4c2.7-3 3.6-8.792.4-10.191a1.54 1.54 0 0 0-1.9.691"/><path fill="#730000" d="M20.756 13.515a1.54 1.54 0 0 0 .2 2a4.3 4.3 0 0 1 1.3 2.5a5 5 0 0 1-.1 1.3c.4-.7 2.2-5.6-.1-6.294a1.38 1.38 0 0 0-1.3.494"/></svg> </template>
CSS
.icon-file-type-stylable {
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%22SVGXn4mTbxv%22%20x1%3D%22-1947.843%22%20x2%3D%22-1947.706%22%20y1%3D%22-2006.674%22%20y2%3D%22-2005.516%22%20gradientTransform%3D%22matrix(12.867%200%200%2021.023%2025072.473%2042188.473)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%237ad852%22%2F%3E%3Cstop%20offset%3D%22.536%22%20stop-color%3D%22%233ab38b%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300bfc9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGuU6TZDMX%22%20x1%3D%22-1958.897%22%20x2%3D%22-1959.478%22%20y1%3D%22-1999.713%22%20y2%3D%22-1998.526%22%20gradientTransform%3D%22matrix(12.805%200%200%2021.012%2025107.678%2042025.3)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ff2953%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ea3333%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGXn4mTbxv)%22%20d%3D%22M10.944%202.5c-2.4%201-7.893%205.995-7.893%209.991c0%204.1%205.5%208.992%207.893%209.991a7.1%207.1%200%200%200%202.3.5a2.9%202.9%200%200%200%202.2-1.2a3.03%203.03%200%200%200-.5-4.5c-1.9-1.3-3.4-2.5-3.5-4.8c0-2.3%201.6-3.9%203.5-5.2a2.673%202.673%200%200%200%20.7-4.2a3.01%203.01%200%200%200-2.4-1.1a7.1%207.1%200%200%200-2.3.518%22%2F%3E%3Cpath%20fill%3D%22%23005892%22%20d%3D%22M15.44%2021.882a2.97%202.97%200%200%200-.5-4.5c-2.3-1.5-3.5-3-3.5-4.9a5.6%205.6%200%200%201%201.8-3.9c-5.3%205.695-5.995%2011.989-.9%2014.287a2.745%202.745%200%200%200%203.1-.987%22%2F%3E%3Cpath%20fill%3D%22%2300418e%22%20d%3D%22M13.042%2019.784a2.325%202.325%200%200%200-.3-3.1a4.77%204.77%200%200%201-1.7-4a4.26%204.26%200%200%201%201.1-2.7c-3.4%203.9-4.4%208.992-1.1%2010.591a1.92%201.92%200%200%200%202-.791%22%2F%3E%3Cpath%20fill%3D%22%23002355%22%20d%3D%22M11.543%2018.285a1.54%201.54%200%200%200-.2-2a3.33%203.33%200%200%201-1.1-2.6c0-.9.3-1.8-.2-.7s-1.9%204.7.2%205.695a1.13%201.13%200%200%200%201.3-.395%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGuU6TZDMX)%22%20d%3D%22M18.758%2030a3.15%203.15%200%200%201-2.4-1.1a2.673%202.673%200%200%201%20.7-4.2c1.9-1.3%203.4-2.9%203.5-5.2c0-2.3-1.6-3.8-3.5-5.2a2.9%202.9%200%200%201-.7-4.3a3.15%203.15%200%200%201%202.4-1.1a6.6%206.6%200%200%201%202.3.5c2.4%201%207.793%205.895%207.893%209.991c0%203.9-5.5%208.992-7.893%209.991a5.2%205.2%200%200%201-2.3.618%22%2F%3E%3Cpath%20fill%3D%22%23470000%22%20d%3D%22M16.26%2010.018a2.82%202.82%200%200%200%20.8%204.3c2.3%201.6%203.4%203.3%203.4%205.2a5.6%205.6%200%200%201-1.8%203.9c5.5-3.9%205.995-11.989.9-14.287a3.04%203.04%200%200%200-3.3.887%22%20opacity%3D%22.6%22%2F%3E%3Cpath%20fill%3D%22%23670010%22%20d%3D%22M19.258%2012.016a2.224%202.224%200%200%200%20.3%203.1a4.77%204.77%200%200%201%201.7%204a4.1%204.1%200%200%201-.5%202.4c2.7-3%203.6-8.792.4-10.191a1.54%201.54%200%200%200-1.9.691%22%2F%3E%3Cpath%20fill%3D%22%23730000%22%20d%3D%22M20.756%2013.515a1.54%201.54%200%200%200%20.2%202a4.3%204.3%200%200%201%201.3%202.5a5%205%200%200%201-.1%201.3c.4-.7%202.2-5.6-.1-6.294a1.38%201.38%200%200%200-1.3.494%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%22SVGXn4mTbxv%22%20x1%3D%22-1947.843%22%20x2%3D%22-1947.706%22%20y1%3D%22-2006.674%22%20y2%3D%22-2005.516%22%20gradientTransform%3D%22matrix(12.867%200%200%2021.023%2025072.473%2042188.473)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%237ad852%22%2F%3E%3Cstop%20offset%3D%22.536%22%20stop-color%3D%22%233ab38b%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300bfc9%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGuU6TZDMX%22%20x1%3D%22-1958.897%22%20x2%3D%22-1959.478%22%20y1%3D%22-1999.713%22%20y2%3D%22-1998.526%22%20gradientTransform%3D%22matrix(12.805%200%200%2021.012%2025107.678%2042025.3)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ff2953%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ea3333%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGXn4mTbxv)%22%20d%3D%22M10.944%202.5c-2.4%201-7.893%205.995-7.893%209.991c0%204.1%205.5%208.992%207.893%209.991a7.1%207.1%200%200%200%202.3.5a2.9%202.9%200%200%200%202.2-1.2a3.03%203.03%200%200%200-.5-4.5c-1.9-1.3-3.4-2.5-3.5-4.8c0-2.3%201.6-3.9%203.5-5.2a2.673%202.673%200%200%200%20.7-4.2a3.01%203.01%200%200%200-2.4-1.1a7.1%207.1%200%200%200-2.3.518%22%2F%3E%3Cpath%20fill%3D%22%23005892%22%20d%3D%22M15.44%2021.882a2.97%202.97%200%200%200-.5-4.5c-2.3-1.5-3.5-3-3.5-4.9a5.6%205.6%200%200%201%201.8-3.9c-5.3%205.695-5.995%2011.989-.9%2014.287a2.745%202.745%200%200%200%203.1-.987%22%2F%3E%3Cpath%20fill%3D%22%2300418e%22%20d%3D%22M13.042%2019.784a2.325%202.325%200%200%200-.3-3.1a4.77%204.77%200%200%201-1.7-4a4.26%204.26%200%200%201%201.1-2.7c-3.4%203.9-4.4%208.992-1.1%2010.591a1.92%201.92%200%200%200%202-.791%22%2F%3E%3Cpath%20fill%3D%22%23002355%22%20d%3D%22M11.543%2018.285a1.54%201.54%200%200%200-.2-2a3.33%203.33%200%200%201-1.1-2.6c0-.9.3-1.8-.2-.7s-1.9%204.7.2%205.695a1.13%201.13%200%200%200%201.3-.395%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGuU6TZDMX)%22%20d%3D%22M18.758%2030a3.15%203.15%200%200%201-2.4-1.1a2.673%202.673%200%200%201%20.7-4.2c1.9-1.3%203.4-2.9%203.5-5.2c0-2.3-1.6-3.8-3.5-5.2a2.9%202.9%200%200%201-.7-4.3a3.15%203.15%200%200%201%202.4-1.1a6.6%206.6%200%200%201%202.3.5c2.4%201%207.793%205.895%207.893%209.991c0%203.9-5.5%208.992-7.893%209.991a5.2%205.2%200%200%201-2.3.618%22%2F%3E%3Cpath%20fill%3D%22%23470000%22%20d%3D%22M16.26%2010.018a2.82%202.82%200%200%200%20.8%204.3c2.3%201.6%203.4%203.3%203.4%205.2a5.6%205.6%200%200%201-1.8%203.9c5.5-3.9%205.995-11.989.9-14.287a3.04%203.04%200%200%200-3.3.887%22%20opacity%3D%22.6%22%2F%3E%3Cpath%20fill%3D%22%23670010%22%20d%3D%22M19.258%2012.016a2.224%202.224%200%200%200%20.3%203.1a4.77%204.77%200%200%201%201.7%204a4.1%204.1%200%200%201-.5%202.4c2.7-3%203.6-8.792.4-10.191a1.54%201.54%200%200%200-1.9.691%22%2F%3E%3Cpath%20fill%3D%22%23730000%22%20d%3D%22M20.756%2013.515a1.54%201.54%200%200%200%20.2%202a4.3%204.3%200%200%201%201.3%202.5a5%205%200%200%201-.1%201.3c.4-.7%202.2-5.6-.1-6.294a1.38%201.38%200%200%200-1.3.494%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-stylable.svg?color=%231a73e8&size=48
