ICONYZ
English
Bayer icon from theSVG Color

Bayer icon

thesvg-color:bayer

The Bayer icon (thesvg-color:bayer) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 633 × 633 grid. theSVG Color 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
theSVG Color
Author
thesvg.org
License
MIT
Size
633 × 633
Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="633" height="633" viewBox="0 0 633 633"><g stroke-width="8.333"><path fill="#89d329" d="M632.5 296.667C622.5 131.667 485 0 316.667 0S10.833 131.667.833 296.667c0 6.666.834 13.333 1.667 20C9.167 371.667 30 422.5 61.667 465c57.5 78.333 150 129.167 255 129.167C170 594.167 50 480 40 336.667c-.833-6.667-.833-13.334-.833-20s0-13.334.833-20c10-143.334 130-257.5 276.667-257.5c105 0 197.5 50.833 255 129.166c31.666 42.5 52.5 93.334 59.166 148.334c.834 6.666 1.667 13.333 1.667 19.166c0-6.666.833-13.333.833-20c0-5.833 0-12.5-.833-19.166"/><path fill="#00bcff" d="M.833 336.667c10 165 147.5 296.666 315.834 296.666C485 633.333 622.5 501.667 632.5 336.667c0-6.667-.833-13.334-1.667-20c-6.666-55-27.5-105.834-59.166-148.334c-57.5-78.333-150-129.166-255-129.166c146.666 0 266.666 114.166 276.666 257.5c.834 6.666.834 13.333.834 20s0 13.333-.834 20c-10 144.166-130 257.5-276.666 257.5c-105 0-197.5-50.834-255-129.167C30 422.5 9.167 371.667 2.5 316.667C1.667 310 .833 303.333.833 297.5c0 6.667-.833 13.333-.833 20c0 5.833 0 12.5.833 19.167"/></g><path fill="#10384f" d="M277.499 60.833v87.5h60.833c15 0 26.666-11.667 26.666-26.667c0-7.5-3.333-14.167-8.333-19.167c3.333-4.166 5.833-10 6.666-15.833c0-14.167-11.666-25.833-25.833-25.833zm20 18.333h36.665a7.47 7.47 0 0 1 7.501 7.5a7.47 7.47 0 0 1-7.5 7.5h-36.667zm0 33.333h37.5c5 0 8.333 3.333 8.333 8.333s-3.334 8.334-8.334 8.334h-37.5zm9.166 52.5l-43.333 87.5h22.5l6.666-15h49.167l6.666 15h22.5l-44.166-87.5Zm10 22.5l15 31.667h-30zm30.002 84.168h25L327.5 328.333v30.834h-20.833v-30.834L262.5 271.667h25l30 40zm143.33-.002v87.5h20.833v-33.333h15.833l25 33.333h25l-25.833-34.167c10.833-3.333 19.167-13.333 19.167-25.832c0-15-11.667-27.5-26.667-27.5zm21.667 18.333h30c4.167 0 8.334 4.167 8.334 8.334s-3.334 8.333-8.334 8.333h-30zM64.167 271.666v87.5H125c15 0 26.667-11.666 26.667-26.666c0-7.5-3.334-14.167-8.334-19.167c3.334-4.167 5.833-10 6.666-15.833c0-14.167-11.666-25.834-25.833-25.834zm20 18.334h36.666a7.47 7.47 0 0 1 7.5 7.5a7.47 7.47 0 0 1-7.5 7.5H84.166Zm0 33.333h37.5c5 0 8.333 3.333 8.333 8.333S126.666 340 121.666 340h-37.5ZM207.5 271.667l-43.333 87.5h22.5l6.667-15H242.5l6.666 15h22.5l-44.167-87.5zm10 22.5l15 31.667h-30zm245-22.5v18.808h-58.333v14.72h56.666v18.808h-56.666v16.355H462.5v18.809h-79.167v-87.5zm-185.834 215v87.5H297.5v-33.332h15.833l25 33.332h25L337.5 540.001c10.833-3.334 19.167-13.333 19.167-25.833c0-15-11.667-27.5-26.667-27.5zM298.333 505h30c4.168 0 8.334 4.167 8.334 8.334s-3.333 8.334-8.333 8.334h-30Zm58.334-126.861v18.808h-58.334v14.72H355v18.808h-56.667v16.355h58.334v18.809H277.5v-87.5z"/></svg>

How to use the Bayer icon

React

import { Icon } from "@iconify/react";

<Icon icon="thesvg-color:bayer" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="thesvg-color:bayer" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="thesvg-color:bayer" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--bayer]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:bayer"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="thesvg-color:bayer"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/thesvg-color/bayer.svg" alt="Bayer icon" width="24" height="24">

Bayer icon FAQ

Is the Bayer icon free for commercial use?

Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.

How do I use the Bayer icon in React?

Install @iconify/react and render <Icon icon="thesvg-color:bayer" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Bayer icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/bayer.svg" alt="Bayer icon">, or paste the SVG code inline to style it with CSS.

Browse all theSVG Color icons →