Whatsapp icon
thesvg-color:whatsapp
The Whatsapp icon (thesvg-color:whatsapp) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 360 × 362 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
- 360 × 362
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="362" viewBox="0 0 360 362"><path fill="#25d366" fill-rule="evenodd" d="M307.546 52.566C273.709 18.684 228.706.017 180.756 0C81.951 0 1.538 80.404 1.504 179.235c-.017 31.594 8.242 62.432 23.928 89.609L0 361.736l95.024-24.925c26.179 14.285 55.659 21.805 85.655 21.814h.077c98.788 0 179.21-80.413 179.244-179.244c.017-47.898-18.608-92.926-52.454-126.807zm-126.79 275.788h-.06c-26.73-.008-52.952-7.194-75.831-20.765l-5.44-3.231l-56.391 14.791l15.05-54.981l-3.542-5.638c-14.912-23.721-22.793-51.139-22.776-79.286c.035-82.14 66.867-148.973 149.051-148.973c39.793.017 77.198 15.53 105.328 43.695c28.131 28.157 43.61 65.596 43.593 105.398c-.035 82.149-66.867 148.982-148.982 148.982zm81.719-111.577c-4.478-2.243-26.497-13.073-30.606-14.568c-4.108-1.496-7.09-2.243-10.073 2.243c-2.982 4.487-11.568 14.577-14.181 17.559c-2.613 2.991-5.226 3.361-9.704 1.117c-4.477-2.243-18.908-6.97-36.02-22.226c-13.313-11.878-22.304-26.54-24.916-31.027c-2.613-4.486-.275-6.91 1.959-9.136c2.011-2.011 4.478-5.234 6.721-7.847s2.983-4.486 4.478-7.469c1.496-2.991.748-5.603-.369-7.847c-1.118-2.243-10.073-24.289-13.812-33.253c-3.636-8.732-7.331-7.546-10.073-7.692c-2.613-.13-5.595-.155-8.586-.155s-7.839 1.118-11.947 5.604s-15.677 15.324-15.677 37.361s16.047 43.344 18.29 46.335s31.585 48.225 76.51 67.632c10.684 4.615 19.029 7.374 25.535 9.437c10.727 3.412 20.49 2.931 28.208 1.779c8.604-1.289 26.498-10.838 30.228-21.298s3.73-19.433 2.613-21.298s-4.108-2.991-8.586-5.234z" clip-rule="evenodd"/></svg>
How to use the Whatsapp icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:whatsapp" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:whatsapp" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:whatsapp" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--whatsapp]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:whatsapp"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:whatsapp"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/whatsapp.svg" alt="Whatsapp icon" width="24" height="24">
Whatsapp icon in other icon sets
Whatsapp icon FAQ
Is the Whatsapp 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 Whatsapp icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:whatsapp" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Whatsapp icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/whatsapp.svg" alt="Whatsapp icon">, or paste the SVG code inline to style it with CSS.
Browse all theSVG Color icons →
ICONYZ
