How to use the Off-White icon
import { OffWhiteLogo } from "@/assets/icons/offwhiteLogo"
export default function Example() {
return <OffWhiteLogo width="32px" height="32px" />
}Brands icon
Off-White JSX Icon
Copy the Off-White icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentOffWhiteLogo
FileoffwhiteLogo.jsx
CategoryBrands
Copy-ready code
Off-White React JSX component
// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/1114782044
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const OffWhiteLogo = ({ width = "40px", height = "40px", color = "#000000", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 77.1 13.8" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<path d="M7.2 10.9c.5-.7.8-1.6.8-2.8S7.7 6 7.2 5.3s-1.2-1-2.1-1-1.6.3-2.1 1-.8 1.6-.8 2.8.3 2.1.8 2.8 1.2 1 2.1 1 1.6-.4 2.1-1m1.4 1.6c-.8.8-2 1.3-3.5 1.3s-2.7-.4-3.5-1.3C.5 11.5 0 10 0 8.1c0-2 .5-3.4 1.6-4.4.8-.8 2-1.3 3.5-1.3s2.7.4 3.5 1.3c1.1 1 1.6 2.5 1.6 4.4s-.5 3.4-1.6 4.4M15 2.6h.4v1.7h-.6c-.3 0-.5.1-.6.2s-.2.3-.2.4v.7h1.4v1.5H14v6.4h-2.1V7.1h-1V5.6H12v-.5c0-.8.1-1.4.4-1.8.3-.5 1-.7 2.2-.7zM20 2.6h.4v1.7h-.6c-.3 0-.5.1-.6.2s-.2.3-.2.4v.7h1.4v1.5H19v6.4h-2.1V7.1h-1V5.6H17v-.5c0-.8.1-1.4.4-1.8.3-.5 1-.7 2.2-.7zM21 8.3h4.1v2H21zM28.2 2.7l1.4 6.2.3 1.7.3-1.7 1.3-6.2h2.3l1.3 6.2.3 1.7.3-1.7 1.5-6.2h2.3l-3.1 10.7h-2.1L33 7.2l-.4-2.1-.4 2.1-1.2 6.2h-2.1L25.8 2.7zM46.3 5.6c.4.2.7.4 1 .8.2.3.3.6.4.9 0 .3.1.8.1 1.5v4.7h-2.1V8.7c0-.4-.1-.8-.2-1-.2-.4-.5-.6-1.1-.6-.5 0-1 .2-1.2.5-.3.4-.4.9-.4 1.6v4.3h-2.1V2.8h2.1v3.8c.3-.5.6-.8 1-1s.8-.3 1.2-.3c.5 0 .9.1 1.3.3M49.7 5.5h2.1v7.9h-2.1zm2.1-.9h-2.1V2.7h2.1zM53 7.1V5.6h1.1V3.4h2v2.2h1.3v1.5h-1.3v4.2c0 .3 0 .5.1.6s.3.1.8.1h.4v1.5h-1c-1 0-1.6-.1-2-.5-.2-.2-.3-.6-.3-1.1V7zM60.9 7.5q-.45.45-.6 1.2h3.6c0-.5-.2-1-.6-1.3-.3-.3-.7-.4-1.2-.4s-.9.2-1.2.5M64 5.7c.6.2 1 .6 1.4 1.2.3.5.5 1 .6 1.6.1.4.1.9.1 1.6h-5.8c0 .8.3 1.4.8 1.7.3.2.7.3 1.1.3.5 0 .9-.1 1.1-.4.2-.1.3-.3.4-.5h2.1c-.1.5-.3.9-.8 1.4q-1.05 1.2-3 1.2c-1.1 0-2-.3-2.8-1-.8-.6-1.2-1.7-1.2-3.2 0-1.4.4-2.4 1.1-3.2.7-.7 1.7-1.1 2.8-1.1.9 0 1.5.1 2.1.4M70.7 0v1H69v4.8h-1.2V1H66V0zM75.3 0h1.8v5.8h-1.2V.9l-1.1 4.9h-1.2L72.5.9v4.9h-1.1V0h1.8l1.1 4.6z"/>
</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 Off-White 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.