Like Dislike icon
andrsrxn:like-dislike
The Like Dislike icon (andrsrxn:like-dislike) is a free SVG icon from the andrsrxn/icons set by Andrés Raxón. It is drawn on a 24 × 24 grid. andrsrxn/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
- andrsrxn/icons
- Author
- Andrés Raxón
- License
- MIT
- Size
- 24 × 24
- Category
- Social
- Tags
- likedislike
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><rect width="7.36" height="3.62" x="1.98" y="13.64" fill="currentColor" opacity=".2" rx="1" transform="rotate(-90 1.98 13.64)"/><rect width="7.36" height="3.62" x="22.09" y="10.44" fill="currentColor" opacity=".2" rx="1" transform="rotate(90 22.1 10.44)"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.78 13.75H5.66c-1.73 0-2.6 0-3.17-.5l-.17-.18c-.5-.57-.5-1.43-.5-3.17c0-1.72 0-2.57.49-3.14l.2-.2c.56-.49 1.42-.49 3.13-.49c0 0 .82-1.28 1.07-2.18q.08-.3.13-.6c.16-.96.24-1.43.61-1.67c.38-.24.67-.16 1.26 0c.42.11.82.33 1.05.72c.33.58.36 1.4.28 2.15c-.07.7-.11 1.06-.06 1.25c.1.34.27.53.6.66c.17.07.47.07 1.06.07c1.22 0 1.82 0 2.23.2a2 2 0 0 1 1.14 1.73c.02.45-.23 1.01-.71 2.13l-.17.37c-.44 1.01-.66 1.52-1 1.9a3 3 0 0 1-1.21.78c-.48.17-1.04.17-2.14.17"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.75 10.33h3.66c1.73 0 2.6 0 3.16.5l.18.18c.5.57.5 1.44.5 3.17c0 1.72 0 2.58-.49 3.14l-.2.2c-.56.5-1.42.5-3.13.5c0 0-.82 1.28-1.07 2.18q-.08.3-.13.6c-.16.95-.24 1.42-.61 1.66c-.38.24-.67.16-1.26 0a1.7 1.7 0 0 1-1.05-.71a3.7 3.7 0 0 1-.28-2.16c.07-.7.1-1.06.06-1.24a.9.9 0 0 0-.6-.66c-.18-.07-.47-.07-1.06-.07h-.46c-.8 0-1.21 0-1.5-.1a2 2 0 0 1-1.4-2.13c.03-.3.2-.67.52-1.42M5.6 6.18v7.57m12.87 4.15v-7.57"/></g></svg>How to use the Like Dislike icon
React
import { Icon } from "@iconify/react";
<Icon icon="andrsrxn:like-dislike" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="andrsrxn:like-dislike" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="andrsrxn:like-dislike" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[andrsrxn--like-dislike]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/andrsrxn -->
<div class="i-andrsrxn:like-dislike"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="andrsrxn:like-dislike"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/andrsrxn/like-dislike.svg" alt="Like Dislike icon" width="24" height="24">Related icons in andrsrxn/icons
Like Dislike icon in other icon sets
Like Dislike icon FAQ
Is the Like Dislike icon free for commercial use?
Yes. andrsrxn/icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Like Dislike icon in React?
Install @iconify/react and render <Icon icon="andrsrxn:like-dislike" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Like Dislike icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/andrsrxn/like-dislike.svg" alt="Like Dislike icon">, or paste the SVG code inline to style it with CSS.