banana icon

banana from TDesign Icons by TDesign · Outline · MIT Free for personal and commercial use.

Name: banana
Set: TDesign Icons
Style: Outline
Viewbox: 24×24
License: MIT

1 other variant in TDesign Icons

The same icon in other sets

bananaEmoji One (Colored)bananaFluent Emoji bananaFluent Emoji Flat bananaFluent Emoji High Contrast bananaFirefox OS Emoji bananaHuge Icons bananaIconPark bananaIconPark Outline bananaIconPark Solid bananaIconPark TwoTone bananaLucide bananaNoto Emoji bananaOpenMoji bananaTabler Icons bananaWeb3 Icons Branded bananaTwitter Emoji

Use the banana icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><defs><path id="SVGwNo5uPet" d="m21 4.18l-3-1.2v4.521c-.62 6-4.89 8.752-9.763 7.571c-1.603-.388-3.66-1.038-5.286-1.882c-.612-.318-.951.524-.951 1.31c0 3.5 5.422 7.803 12.008 6.123S23.763 11.329 21 7.5z"/></defs><g fill="none"><path d="M18 7.501c-.62 6-4.89 8.752-9.763 7.57c-3.082-.969-4.01-3.57-4.237-4.57s.232-.995.966-.645S8.118 11.674 11 11.5c4.936-.297 6.323-2.615 7-4"/><use href="#SVGwNo5uPet"/><g stroke="currentColor" stroke-linecap="square" stroke-width="2"><path d="M18 7.501c-.62 6-4.89 8.752-9.763 7.57c-3.082-.969-4.01-3.57-4.237-4.57s.232-.995.966-.645S8.118 11.674 11 11.5c4.936-.297 6.323-2.615 7-4Z"/><use href="#SVGwNo5uPet"/></g></g></svg>

React

import type { SVGProps } from "react";

export function TdesignBanana(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><defs><path id="SVGwNo5uPet" d="m21 4.18l-3-1.2v4.521c-.62 6-4.89 8.752-9.763 7.571c-1.603-.388-3.66-1.038-5.286-1.882c-.612-.318-.951.524-.951 1.31c0 3.5 5.422 7.803 12.008 6.123S23.763 11.329 21 7.5z"/></defs><g fill="none"><path d="M18 7.501c-.62 6-4.89 8.752-9.763 7.57c-3.082-.969-4.01-3.57-4.237-4.57s.232-.995.966-.645S8.118 11.674 11 11.5c4.936-.297 6.323-2.615 7-4"/><use href="#SVGwNo5uPet"/><g stroke="currentColor" strokeLinecap="square" strokeWidth="2"><path d="M18 7.501c-.62 6-4.89 8.752-9.763 7.57c-3.082-.969-4.01-3.57-4.237-4.57s.232-.995.966-.645S8.118 11.674 11 11.5c4.936-.297 6.323-2.615 7-4Z"/><use href="#SVGwNo5uPet"/></g></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><defs><path id="SVGwNo5uPet" d="m21 4.18l-3-1.2v4.521c-.62 6-4.89 8.752-9.763 7.571c-1.603-.388-3.66-1.038-5.286-1.882c-.612-.318-.951.524-.951 1.31c0 3.5 5.422 7.803 12.008 6.123S23.763 11.329 21 7.5z"/></defs><g fill="none"><path d="M18 7.501c-.62 6-4.89 8.752-9.763 7.57c-3.082-.969-4.01-3.57-4.237-4.57s.232-.995.966-.645S8.118 11.674 11 11.5c4.936-.297 6.323-2.615 7-4"/><use href="#SVGwNo5uPet"/><g stroke="currentColor" stroke-linecap="square" stroke-width="2"><path d="M18 7.501c-.62 6-4.89 8.752-9.763 7.57c-3.082-.969-4.01-3.57-4.237-4.57s.232-.995.966-.645S8.118 11.674 11 11.5c4.936-.297 6.323-2.615 7-4Z"/><use href="#SVGwNo5uPet"/></g></g></svg>
</template>

CSS

.icon-banana {
  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%2024%2024%22%3E%3Cdefs%3E%3Cpath%20id%3D%22SVGwNo5uPet%22%20d%3D%22m21%204.18l-3-1.2v4.521c-.62%206-4.89%208.752-9.763%207.571c-1.603-.388-3.66-1.038-5.286-1.882c-.612-.318-.951.524-.951%201.31c0%203.5%205.422%207.803%2012.008%206.123S23.763%2011.329%2021%207.5z%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18%207.501c-.62%206-4.89%208.752-9.763%207.57c-3.082-.969-4.01-3.57-4.237-4.57s.232-.995.966-.645S8.118%2011.674%2011%2011.5c4.936-.297%206.323-2.615%207-4%22%2F%3E%3Cuse%20href%3D%22%23SVGwNo5uPet%22%2F%3E%3Cg%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M18%207.501c-.62%206-4.89%208.752-9.763%207.57c-3.082-.969-4.01-3.57-4.237-4.57s.232-.995.966-.645S8.118%2011.674%2011%2011.5c4.936-.297%206.323-2.615%207-4Z%22%2F%3E%3Cuse%20href%3D%22%23SVGwNo5uPet%22%2F%3E%3C%2Fg%3E%3C%2Fg%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%2024%2024%22%3E%3Cdefs%3E%3Cpath%20id%3D%22SVGwNo5uPet%22%20d%3D%22m21%204.18l-3-1.2v4.521c-.62%206-4.89%208.752-9.763%207.571c-1.603-.388-3.66-1.038-5.286-1.882c-.612-.318-.951.524-.951%201.31c0%203.5%205.422%207.803%2012.008%206.123S23.763%2011.329%2021%207.5z%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18%207.501c-.62%206-4.89%208.752-9.763%207.57c-3.082-.969-4.01-3.57-4.237-4.57s.232-.995.966-.645S8.118%2011.674%2011%2011.5c4.936-.297%206.323-2.615%207-4%22%2F%3E%3Cuse%20href%3D%22%23SVGwNo5uPet%22%2F%3E%3Cg%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M18%207.501c-.62%206-4.89%208.752-9.763%207.57c-3.082-.969-4.01-3.57-4.237-4.57s.232-.995.966-.645S8.118%2011.674%2011%2011.5c4.936-.297%206.323-2.615%207-4Z%22%2F%3E%3Cuse%20href%3D%22%23SVGwNo5uPet%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/tdesign/banana.svg?color=%231a73e8&size=48