How to use the Medusa icon
import { MedusaLogo } from "@/assets/icons/medusaLogo"
export default function Example() {
return <MedusaLogo width="32px" height="32px" />
}E-commerce icon
Medusa JSX Icon
Copy the Medusa icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentMedusaLogo
FilemedusaLogo.jsx
CategoryE-commerce
Copy-ready code
Medusa React JSX component
// Source: https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/medusa.svg
// Asset license: Simple Icons CC0 1.0 Universal. Brand names and marks remain trademarks of their respective owners.
export const MedusaLogo = ({ width = "40px", height = "40px", color = "#000000", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill={color}>
<path d="M20.325 3.8958 14.8913.7692a5.7283 5.7283 0 0 0-5.7342 0L3.6983 3.8958C1.9455 4.9213.8437 6.8223.8437 8.8484v6.2783c0 2.051 1.1018 3.927 2.8546 4.9526l5.4337 3.1515a5.7283 5.7283 0 0 0 5.7343 0l5.4338-3.1515c1.7778-1.0256 2.8545-2.9015 2.8545-4.9526V8.8484c.0501-2.026-1.0517-3.927-2.8296-4.9526Zm-8.3133 13.6821c-3.08 0-5.584-2.5013-5.584-5.5778 0-3.0767 2.504-5.578 5.584-5.578 3.08 0 5.609 2.5013 5.609 5.578 0 3.0765-2.504 5.5778-5.609 5.5778z"/>
</svg>
)
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.
Looking for a similar mark? Browse the related icons below or explore the full e-commerce collection.
Related JSX icons
FAQ
Is the Medusa 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.