vanilla extract logo

vanilla-extract from Material Icon Theme by Material Extensions · Color · MIT Free for personal and commercial use.

Name
vanilla-extract
Set
Material Icon Theme
Style
Color
Viewbox
800×800
License
MIT

The same logo in other sets

vanilla-extractCatppuccin Icons

Use the vanilla extract logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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>

React

import type { SVGProps } from "react";

export function MaterialIconThemeVanillaExtract(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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>
</template>

CSS

.icon-vanilla-extract {
  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%20800%20800%22%3E%3Cpath%20fill%3D%22%234dd0e1%22%20d%3D%22M663.25%20410.25c-103.784-91.407-412.709-100.723-517.846-2.846c-7.23%207.892-26.75%2025-23.73%2037.634c159.311%20140.398%20448.145%20138.143%20554.153%206.481c6.824-20.016-7.894-36.817-12.577-41.269%22%2F%3E%3Cpath%20fill%3D%22%23795548%22%20d%3D%22M404.25%20578.5c145.5%200%20263.75-47.5%20263.75-106s-118-106-263.75-106S140.5%20414%20140.5%20472.5s118%20106%20263.75%20106%22%2F%3E%3Cpath%20fill%3D%22%23f06292%22%20d%3D%22M400.16%2049.46c-22.807%200%2022.829%2013.85-4.16%2058.54c-16%2022.5-45.25%2028.25-93.5%2055c-47.899%2026.555-63.277%2049.662-66.678%2079.836c-80.204%2013.756-66.269%2091.232-61.625%20101.361c-6.565%204.276-44.961%2037.303-5.494%2088.268c72.037%2062.824%20323.526%2098.854%20444.33%209.785c48.6-35.833%2053.566-105.218-15.877-137.072c11.912-72.915-12.186-126.055-76.185-137.48C498.065%2087.425%20412.84%2050.743%20400.16%2049.46%22%2F%3E%3Cpath%20fill%3D%22%234dd0e1%22%20d%3D%22M658.288%20440.52c-20.143%2038.613-58.076%2047.576-95.615%2062.865c-33.166%207.694-51.985%2012.91-85.827%2017.115c-40.597%205.36-87.514%204.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%2011.423c9.481%2044.154%2016.347%2069.231%2032.866%20130.52c9.515%2032.88%2017.811%2070.063%2030.615%20101.807c30.273%2059.248%20171.943%2068.905%20215%2067.75c63.145%201.49%20155.976-11.737%20201.75-45.25C619.8%20686.943%20633.988%20659.793%20638%20634.75c17.423-69.635%2031.596-124.788%2039.27-187.654c-9.18-46.002-13.936-21.428-18.982-6.577%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%20800%20800%22%3E%3Cpath%20fill%3D%22%234dd0e1%22%20d%3D%22M663.25%20410.25c-103.784-91.407-412.709-100.723-517.846-2.846c-7.23%207.892-26.75%2025-23.73%2037.634c159.311%20140.398%20448.145%20138.143%20554.153%206.481c6.824-20.016-7.894-36.817-12.577-41.269%22%2F%3E%3Cpath%20fill%3D%22%23795548%22%20d%3D%22M404.25%20578.5c145.5%200%20263.75-47.5%20263.75-106s-118-106-263.75-106S140.5%20414%20140.5%20472.5s118%20106%20263.75%20106%22%2F%3E%3Cpath%20fill%3D%22%23f06292%22%20d%3D%22M400.16%2049.46c-22.807%200%2022.829%2013.85-4.16%2058.54c-16%2022.5-45.25%2028.25-93.5%2055c-47.899%2026.555-63.277%2049.662-66.678%2079.836c-80.204%2013.756-66.269%2091.232-61.625%20101.361c-6.565%204.276-44.961%2037.303-5.494%2088.268c72.037%2062.824%20323.526%2098.854%20444.33%209.785c48.6-35.833%2053.566-105.218-15.877-137.072c11.912-72.915-12.186-126.055-76.185-137.48C498.065%2087.425%20412.84%2050.743%20400.16%2049.46%22%2F%3E%3Cpath%20fill%3D%22%234dd0e1%22%20d%3D%22M658.288%20440.52c-20.143%2038.613-58.076%2047.576-95.615%2062.865c-33.166%207.694-51.985%2012.91-85.827%2017.115c-40.597%205.36-87.514%204.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%2011.423c9.481%2044.154%2016.347%2069.231%2032.866%20130.52c9.515%2032.88%2017.811%2070.063%2030.615%20101.807c30.273%2059.248%20171.943%2068.905%20215%2067.75c63.145%201.49%20155.976-11.737%20201.75-45.25C619.8%20686.943%20633.988%20659.793%20638%20634.75c17.423-69.635%2031.596-124.788%2039.27-187.654c-9.18-46.002-13.936-21.428-18.982-6.577%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-icon-theme/vanilla-extract.svg?color=%231a73e8&size=48