Tangerine icon
fluent-emoji-high-contrast:tangerine
The Tangerine icon (fluent-emoji-high-contrast:tangerine) is a free SVG icon from the Fluent Emoji High Contrast set by Microsoft Corporation. It is drawn on a 32 × 32 grid. Fluent Emoji High Contrast 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
- Fluent Emoji High Contrast
- Author
- Microsoft Corporation
- License
- MIT
- Size
- 32 × 32
- Category
- Food & Drink
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="M12 2H7a5 5 0 0 0 4.625 4.986C7.144 8.886 4 13.326 4 18.5C4 25.404 9.596 31 16.5 31S29 25.404 29 18.5c0-6.77-5.38-12.282-12.099-12.494A5 5 0 0 0 12 2M6 18.5C6 12.701 10.701 8 16.5 8S27 12.701 27 18.5S22.299 29 16.5 29S6 24.299 6 18.5"/></svg>
How to use the Tangerine icon
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji-high-contrast:tangerine" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji-high-contrast:tangerine" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji-high-contrast:tangerine" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji-high-contrast--tangerine]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji-high-contrast -->
<div class="i-fluent-emoji-high-contrast:tangerine"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji-high-contrast:tangerine"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/fluent-emoji-high-contrast/tangerine.svg" alt="Tangerine icon" width="24" height="24">
Tangerine icon in other icon sets
Tangerine icon FAQ
Is the Tangerine icon free for commercial use?
Yes. Fluent Emoji High Contrast icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Tangerine icon in React?
Install @iconify/react and render <Icon icon="fluent-emoji-high-contrast:tangerine" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Tangerine icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/fluent-emoji-high-contrast/tangerine.svg" alt="Tangerine icon">, or paste the SVG code inline to style it with CSS.
Browse all Fluent Emoji High Contrast icons →
ICONYZ
