Stylable icon
file-icons:stylable
The Stylable icon (file-icons:stylable) is a free SVG icon from the File Icons set by John Gardner. It is drawn on a 455 × 512 grid. File Icons are released under the ISC license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- File Icons
- Author
- John Gardner
- License
- ISC
- Size
- 455 × 512
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="455" height="512" viewBox="0 0 455 512"><path fill="currentColor" fill-rule="evenodd" d="M245.976 416.188c33.24-24.575 60.408-54.075 60.975-96.334c-.567-42.26-27.77-70.327-60.975-95.027c-37.44-40.31-25.041-97.189 29.5-97.899c106.284 12.382 175.226 129.037 178.65 192.926c-.236 71.144-96.298 165.176-138.295 183.12c-76.821 36.411-121.734-46.453-69.855-86.786M138.97 8.622C96.77 26.576.326 119.007 0 191.844c.568 75.298 96.77 165.27 138.969 183.224c77.379 45.933 118.373-63.549 70.224-94.285c-33.398-24.587-60.732-46.655-61.302-88.94c.57-42.282 27.904-71.794 61.302-96.383c67.045-61.63-15.661-117.386-70.224-86.838"/></svg>How to use the Stylable icon
React
import { Icon } from "@iconify/react";
<Icon icon="file-icons:stylable" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="file-icons:stylable" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="file-icons:stylable" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[file-icons--stylable]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/file-icons -->
<div class="i-file-icons:stylable"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="file-icons:stylable"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/file-icons/stylable.svg" alt="Stylable icon" width="24" height="24">Stylable icon in other icon sets
Stylable icon FAQ
Is the Stylable icon free for commercial use?
Yes. File Icons are released under the ISC license, which allows use in personal and commercial projects.
How do I use the Stylable icon in React?
Install @iconify/react and render <Icon icon="file-icons:stylable" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Stylable icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/file-icons/stylable.svg" alt="Stylable icon">, or paste the SVG code inline to style it with CSS.