How to use the Mizuno icon
import { MizunoLogo } from "@/assets/icons/mizunoLogo"
export default function Example() {
return <MizunoLogo width="32px" height="32px" />
}Brands icon
Mizuno JSX Icon
Copy the Mizuno icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentMizunoLogo
FilemizunoLogo.jsx
CategoryBrands
Copy-ready code
Mizuno React JSX component
// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/1115266890
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const MizunoLogo = ({ width = "40px", height = "40px", color = "#000000", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 300 165.503" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<defs><clipPath id="a"><path d="M0 841.89h595.276V0H0z"/></clipPath></defs><g clipPath="url(#a)" transform="matrix(1.00738 0 0 -1.00738 -157.977 504.81)"><path d="M0 0h1.181v2.661l1.354-.018c.354 0 .946-.456.995-1.064.033-.428-.034-1.558.177-1.558h1.211c-.209.073-.313 1.109-.387 1.865-.091.995-.799 1.263-.968 1.337.226.018 1.257.532 1.257 1.477 0 1.012-.859 1.896-1.972 1.896v-.007H0zm1.181 5.583h1.391c.579 0 1.04-.554 1.04-.979 0-.421-.365-.989-1.04-.989v-.002l-1.391.007z" transform="translate(445.779 340.059)"/><path d="M0 0a5.492 5.492 0 0 1 10.982 0A5.492 5.492 0 0 1 0 0m10.433 0a4.94 4.94 0 0 0-4.944-4.941 4.941 4.941 0 0 0 0 9.882A4.94 4.94 0 0 0 10.433 0" transform="translate(442.648 343.339)"/><path d="M0 0c1.125 1.321 1.781 3.103 1.781 4.961v6.845h-35.013V4.189h19.333l-16.94-18.738c-1.116-1.328-1.874-2.947-1.874-4.836v-6.963H2.274v7.61H-16.93z" transform="translate(316.6 364.161)"/><path d="M0 0c-4.229 0-7.704-3.416-7.704-7.638v-22.874c0-4.213 3.475-7.641 7.704-7.641h27.249c4.219 0 7.593 3.428 7.593 7.641v22.874C34.842-3.416 31.468 0 27.249 0zm16.471-7.616a3.804 3.804 0 0 0 3.806-3.822v-15.28c0-2.105-1.701-3.826-3.811-3.826H10.71a3.837 3.837 0 0 0-3.831 3.826v15.28a3.83 3.83 0 0 0 3.831 3.822z" transform="translate(404.534 375.967)"/><path d="M0 0h14.588v-30.521c0-4.214-3.378-7.632-7.596-7.632H0z" transform="translate(264.269 375.967)"/><path d="M0 0c-4.216 0-7.677 3.429-7.677 7.642v30.511H6.904V11.451c0-2.114 1.754-3.842 3.855-3.842h4.682c2.116 0 3.77 1.721 3.77 3.827v26.717h33.893c4.213 0 7.608-3.413 7.608-7.632V0H46.129v26.732a3.81 3.81 0 0 1-3.826 3.805h-8.505V7.642C33.798 3.429 30.432 0 26.207 0z" transform="translate(331.107 337.813)"/><path d="M0 0c-5.469 0-10.354-2.49-13.588-6.398L-50.8-51.276h21.115l28.229 34.022a11.52 11.52 0 0 0 8.855 4.131h7.447L-16.66-51.276H5.986c5.282 0 9.522 4.279 9.522 9.555V0z" transform="translate(242.825 389.09)"/><path d="m0 0-37.204-44.878h21.1l28.227 34.023a11.54 11.54 0 0 0 8.847 4.13h7.682V6.398H13.579A17.56 17.56 0 0 1 0 0" transform="translate(195.018 382.691)"/><path d="M0 0c-3.504 11.245-8.675 36.434 13.568 52.048 15.894 11.15 64.13 24.327 89.973 33.797l18.577 25.184c-17.721-9.095-40.713-18.411-61.683-24.837C13.692 71.869-14.266 63.372-50.28 62.666c-25.923-.51-26.279 11.723-1.055 33.661-28.321-10.992-67.925-24.017-113.382-34.191 40.551-1.14 71.339-9.384 89.84-20.13C-48.526 26.701-42.139 10.628-39.164 0zm-48.812 46.55c12.641-.451 22.343.542 39.98 4.396-8.32-6.203-15.661-17.499-16.488-26.135-4.382 6.558-14.53 16.746-23.492 21.739" transform="translate(322.53 389.09)"/></g>
</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 brands collection.
Related JSX icons
FAQ
Is the Mizuno 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.