User icon

Log Out JSX Icon

Q: Is the Log Out JSX icon free?

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

Q: Can I customize the Log Out icon?

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

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

Browse all icons

ComponentLogoutIcon

FilelogoutIcon.jsx

CategoryUser

Copy-ready code

Log Out React JSX component

export const LogoutIcon = ({ 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="M15 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H15M8 8L4 12M4 12L8 16M4 12L16 12" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

How to use the Log Out icon

import { LogoutIcon } from "@/assets/icons/logoutIcon"

export default function Example() {
  return <LogoutIcon 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.jsJSXSVGUser icons

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

Related JSX icons

Access Key

Account

Account Security

Add User

Blocked User

Contact

Eye

Help

FAQ

Is the Log Out 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.