General icon

Dislike JSX Icon

Q: Is the Dislike JSX icon free?

Yes. You can copy the Dislike JSX component and use it in React and Next.js projects.

Q: Can I customize the Dislike icon?

Yes. Edit SVG attributes or pass className, width, height and color props depending on the component.

Copy the Dislike icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.

Browse all icons

ComponentDislikeIcon

FiledislikeIcon.jsx

CategoryGeneral

Copy-ready code

Dislike React JSX component

export const DislikeIcon = ({ width = "40px", height = "40px", color = "#000", ...props }) => (
  <svg {...props} width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M8 14V4M8 14L4 14V4.00002L8 4M8 14L13.1956 20.0615C13.6886 20.6367 14.4642 20.884 15.1992 20.7002L15.2467 20.6883C16.5885 20.3529 17.1929 18.7894 16.4258 17.6387L14 14H18.5604C19.8225 14 20.7691 12.8454 20.5216 11.6078L19.3216 5.60779C19.1346 4.67294 18.3138 4.00002 17.3604 4.00002L8 4" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

How to use the Dislike icon

import { DislikeIcon } from "@/assets/icons/dislikeIcon"

export default function Example() {
  return <DislikeIcon width="32px" height="32px" />
}

Built for the web

Use it in your stack

This copy-ready component works in React and Next.js projects, and the SVG can be adapted for any interface.

ReactNext.jsJSXSVGGeneral icons

Looking for a similar mark? Browse the related icons below or explore the full general collection.

Related JSX icons

Add

Bell

Calendar

Camera

Check

Copy

FAQ

Is the Dislike JSX icon free?

Yes. You can copy the JSX component and use it in React and Next.js projects.

Can I customize it?

Yes. Edit the SVG attributes or pass className, width, height and color props depending on the component.