General icon

Mail JSX Icon

Q: Is the Mail JSX icon free?

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

Q: Can I customize the Mail icon?

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

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

Browse all icons

ComponentMailCurveIcon

FilemailCurveIcon.jsx

CategoryGeneral

Copy-ready code

Mail React JSX component

export const MailCurveIcon = ({ width = "40px", height = "40px", color = "#000", ...props }) => (
  <svg {...props} width={width} height={height} viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M21.2091 5.41992C15.5991 16.0599 8.39906 16.0499 2.78906 5.41992" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    <path d="M1.99023 7.39001V17.39C1.99023 18.4509 2.41166 19.4682 3.1618 20.2184C3.91195 20.9685 4.92937 21.39 5.99023 21.39H17.9902C19.0511 21.39 20.0685 20.9685 20.8186 20.2184C21.5688 19.4682 21.9902 18.4509 21.9902 17.39V7.39001C21.9902 6.32915 21.5688 5.31167 20.8186 4.56152C20.0685 3.81138 19.0511 3.39001 17.9902 3.39001H5.99023C4.92937 3.39001 3.91195 3.81138 3.1618 4.56152C2.41166 5.31167 1.99023 6.32915 1.99023 7.39001Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

How to use the Mail icon

import { MailCurveIcon } from "@/assets/icons/mailCurveIcon"

export default function Example() {
  return <MailCurveIcon 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 Mail 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.