Vanilla Extract icon
material-icon-theme:vanilla-extract
The Vanilla Extract icon (material-icon-theme:vanilla-extract) is a free SVG icon from the Material Icon Theme set by Material Extensions. It is drawn on a 800 × 800 grid. Material Icon Theme icons are released under the MIT 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
- Material Icon Theme
- Author
- Material Extensions
- License
- MIT
- Size
- 800 × 800
- Tags
- vanillaextract
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800"><path fill="#4dd0e1" d="M663.25 410.25c-103.784-91.407-412.709-100.723-517.846-2.846c-7.23 7.892-26.75 25-23.73 37.634c159.311 140.398 448.145 138.143 554.153 6.481c6.824-20.016-7.894-36.817-12.577-41.269"/><path fill="#795548" d="M404.25 578.5c145.5 0 263.75-47.5 263.75-106s-118-106-263.75-106S140.5 414 140.5 472.5s118 106 263.75 106"/><path fill="#f06292" d="M400.16 49.46c-22.807 0 22.829 13.85-4.16 58.54c-16 22.5-45.25 28.25-93.5 55c-47.899 26.555-63.277 49.662-66.678 79.836c-80.204 13.756-66.269 91.232-61.625 101.361c-6.565 4.276-44.961 37.303-5.494 88.268c72.037 62.824 323.526 98.854 444.33 9.785c48.6-35.833 53.566-105.218-15.877-137.072c11.912-72.915-12.186-126.055-76.185-137.48C498.065 87.425 412.84 50.743 400.16 49.46"/><path fill="#4dd0e1" d="M658.288 440.52c-20.143 38.613-58.076 47.576-95.615 62.865c-33.166 7.694-51.985 12.91-85.827 17.115c-40.597 5.36-87.514 4.63-147.596-1.5c-28.037-3.568-60.068-10.65-98.75-21.25c-66.246-23.954-81.398-41.57-86.096-58.404c-12.75-6.25-27.212-10.904-22.02 11.423c9.481 44.154 16.347 69.231 32.866 130.52c9.515 32.88 17.811 70.063 30.615 101.807c30.273 59.248 171.943 68.905 215 67.75c63.145 1.49 155.976-11.737 201.75-45.25C619.8 686.943 633.988 659.793 638 634.75c17.423-69.635 31.596-124.788 39.27-187.654c-9.18-46.002-13.936-21.428-18.982-6.577"/></svg>How to use the Vanilla Extract icon
React
import { Icon } from "@iconify/react";
<Icon icon="material-icon-theme:vanilla-extract" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="material-icon-theme:vanilla-extract" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="material-icon-theme:vanilla-extract" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[material-icon-theme--vanilla-extract]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/material-icon-theme -->
<div class="i-material-icon-theme:vanilla-extract"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="material-icon-theme:vanilla-extract"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/material-icon-theme/vanilla-extract.svg" alt="Vanilla Extract icon" width="24" height="24">Vanilla Extract icon in other icon sets
Vanilla Extract icon FAQ
Is the Vanilla Extract icon free for commercial use?
Yes. Material Icon Theme icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Vanilla Extract icon in React?
Install @iconify/react and render <Icon icon="material-icon-theme:vanilla-extract" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Vanilla Extract icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/material-icon-theme/vanilla-extract.svg" alt="Vanilla Extract icon">, or paste the SVG code inline to style it with CSS.