How to use the Oakley icon
import { OakleyLogo } from "@/assets/icons/oakleyLogo"
export default function Example() {
return <OakleyLogo width="32px" height="32px" />
}Brands icon
Oakley JSX Icon
Copy the Oakley icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentOakleyLogo
FileoakleyLogo.jsx
CategoryBrands
Copy-ready code
Oakley React JSX component
// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/1114808867
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const OakleyLogo = ({ width = "40px", height = "40px", color = "#000000", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 512.826 192.347" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<g><path d="M170.851.033C200.53 0 223.849 1.403 249.108 5.7c27.577 4.692 53.296 11.02 74.007 22.889 1.53.877 2.699 1.45 4.686 2.725 8.073 5.184 18.122 13.489 20.055 24.632 1.562 9.01-2.65 16.349-7.194 21.58-4.717 5.43-10.502 9.563-16.676 13.08-25.185 14.35-58.391 21.989-92.862 25.94-16.019 1.836-32.817 3.161-52.534 3.161-19.169 0-36.096-.774-52.426-2.398-33.21-3.302-67.994-10.264-94.17-23.543-6.517-3.306-12.616-6.915-18.093-11.77C8.702 77.385 3.746 71.668 2.35 63.793 0 50.564 9.324 40.94 17.063 35.02c8.293-6.347 18.965-11.649 29.21-15.477 21.294-7.959 47.044-13.247 72.589-16.35 17.025-2.067 32.132-3.138 51.989-3.16m.764 11.88c-23.039 0-44.919 4.183-64.088 11.227-9.387 3.449-17.73 7.685-25.07 13.841-6.403 5.373-13.976 13.989-12.206 25.831 1.527 10.215 9.649 17.502 16.567 22.344 7.723 5.405 16.987 9.492 26.377 12.533 20.286 6.572 43.012 9.402 66.485 9.156 22.3-.234 45.756-4.101 64.196-11.334 9.093-3.568 17.817-7.935 24.959-13.951 6.577-5.54 13.559-14.489 11.772-25.614-1.601-9.964-9.2-17.25-16.567-22.343-8.102-5.602-16.691-9.288-26.376-12.535-14.831-4.97-31.682-7.918-47.848-8.718-5.071-.252-11.742-.734-17.984-.437-.072.004-.145 0-.217 0" transform="translate(80.937 -.033)"/></g><g><path d="M23.638.111C33.475.09 42.227 0 50.23 1.638c2.684.548 5.7 1.586 6.649 3.595.89 1.886.545 5.013.545 9.592v25.177c0 1.611.204 3.644-.218 4.797-1.311 3.573-8.444 4.418-12.099 4.795-9.84 1.017-21.545.95-31.607 0-3.945-.373-11.003-1.22-12.534-4.579C.056 43.018.53 38.302.53 35.316V15.262c0-3.538-.53-8.21.872-10.355 1.421-2.173 6.085-3.38 9.92-3.924 4.277-.607 7.54-.862 12.316-.872m-.872 6.213c-.395.803-.22 3.092-.22 4.469v23.76c0 2.814-.554 7.696.328 9.264.913 1.622 3.437 1.603 5.995 1.635 2.026.025 5.114.147 6.104-1.526.895-1.516.327-6.036.327-9.046V15.915c0-2.04.51-7.804-.11-9.373-.79-2.003-6.032-1.87-7.847-1.744-1.303.09-3.9.148-4.577 1.526" transform="translate(-.407 142.015)"/></g><g><path d="M17.657.002C26.489 0 36.256.003 45.45.002c6.38 16.217 12.786 32.41 19.074 48.72h-25.07c-1.377-3.999-2.635-8.116-4.031-12.099-4.696-.174-10.13-.186-14.823 0-1.342 3.854-2.367 8.024-3.487 12.099H0c4.245-12.115 8.733-24.247 13.079-36.403 1.459-4.081 3.14-8.714 4.578-12.317m4.033 30.953a139 139 0 0 1 12.207 0c-2.172-6.401-4.264-12.883-6.65-19.072-1.748 6.461-3.797 12.623-5.557 19.072" transform="translate(90.697 142.67)"/></g><g><path d="M23.87 19.975c5.187-5.36 10.61-11.388 16.022-17.33.655-.72 1.82-2.131 2.398-2.289 1.299-.356 3.613 0 5.123 0 4.979 0 10.253.09 15.149-.109.211.587-.595.894-.872 1.199-5.651 6.223-11.725 12.828-17.548 18.965 5.769 9.527 11.939 19.234 17.44 28.665H36.404C31.957 42.26 28.19 34.764 23.87 27.823v21.253H.11C.036 33.343.255 16.38 0 .465 7.559.212 16.166.427 23.542.356c.598-.063.328 1.317.328 2.071z" transform="translate(192.06 142.315)"/></g><g><path d="M.328.26H23.98v42.18c7.847.072 15.985-.145 23.651.109v6.431H.11C.362 34.039.149 16.356.219.478 0 .381.267 0 .328.26" transform="translate(290.698 142.411)"/></g><g><path d="M.155.176h46.54v6.213h-22.67c-.255 4.76-.037 9.99-.109 14.932 5.813.072 11.916-.145 17.548.109.041 2.102-.079 4.113.109 5.668H24.025v15.477c7.302.253 15.077.036 22.562.109v6.212H.047V.394C0 .185.121 0 .155.176" transform="translate(373.596 142.495)"/></g><g><path d="M64.741.02c.093-.02.102.043.109.109-6.425 10.178-13.648 20.504-20.382 30.736.071 5.854-.142 12.565.11 17.875-7.776.254-16.023.036-23.979.109-.006-4.263 0-8.765 0-13.406 0-1.486.276-3.176 0-4.469-.242-1.134-1.767-2.681-2.616-3.923A1719 1719 0 0 1 0 .129h25.176c3.713 5.842 7.084 12.026 10.573 18.093C39.405 12.287 42.798 6.088 46.43.129 52.498.057 58.855.274 64.741.02" transform="translate(447.976 142.542)"/></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 Oakley 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.