How to use the UGG icon
import { UggLogo } from "@/assets/icons/uggLogo"
export default function Example() {
return <UggLogo width="32px" height="32px" />
}Brands icon
UGG JSX Icon
Copy the UGG icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentUggLogo
FileuggLogo.jsx
CategoryBrands
Copy-ready code
UGG React JSX component
// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/678226271
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const UggLogo = ({ width = "40px", height = "40px", color = "#000000", ...props }) => (
<svg {...props} width={width} height={height} viewBox="5.3 259.7 598.2 272.5" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<path d="M156.188 396.05c0-36 9-65.625 29.125-89v-15c0-2.875.625-5 1.75-6.5s3.375-2.75 6.375-3.625v-4.5h-51.125v4.5c3 .875 5.25 2.125 6.375 3.625s1.75 3.75 1.75 6.625v95c0 11-.625 19-1.625 24.375q-1.687 7.875-6 13.125c-8.125 9.5-22.125 14.25-41.875 14.25-19.626 0-33.625-4.75-41.75-14.25-3-3.5-5.25-8-6.25-13.125-1.126-5.25-1.626-13.375-1.626-24.375V292.05c0-2.875.626-5 1.876-6.625s3.374-2.75 6.374-3.625v-4.5H5.313v4.5c3 .875 5.25 2.125 6.376 3.625s1.75 3.625 1.75 6.5v106.75c0 13.375 1.624 25 4.874 34.625 3.375 9.875 9.25 17.5 17.75 23.25 14.75 9.875 35.75 14.75 63.5 14.75 30.25 0 52.376-5.625 66.25-16.875-7.375-17.25-9.625-36.75-9.625-58.375m434-11.656c1.25-1.625 3.625-2.75 6.875-3.75v-4.5h-90.625c-2.875 0-5-.75-6.5-2s-2.625-3.75-3.625-7.375h-4.5v46.25h4.5c.875-3.5 2.125-5.875 3.625-7.25 1.5-1.25 3.625-2 6.5-2h47.375v26.875s-8.5 16.75-62.875 19.5c-32.25 1.75-52.625-13-52.625-13-.125.875-.125.375-.125 1.25v36.875s17.375 8.125 53.75 8.125c34.125 0 72.875-10 105.5-37.625v-3.625c-3.5-1-5.75-2.125-7.125-3.75s-1.875-3.75-1.875-6.75v-40.5c-.25-3 .5-5.25 1.75-6.75m-146-59.625c13.125-11.5 29.75-17.375 49.625-17.375 9.875 0 20.25 1.625 31.125 4.625q16.5 4.688 25.125 11.25c2.625 2 4.375 3.75 5 5 .75 1.5 1.125 3.625 1.25 6.75l4 2.125 22.375-47.25-3.875-2.125c-2.625 2.125-4.875 3.375-6.875 3.375-2.75 0-7.25-1.25-13.625-3.875-12.25-4.875-23.25-8.375-32.875-10.5s-19.875-2.625-30.875-3.125c-41.125-2-62.875 10.875-62.875 10.875l-31.375 67.5-13-4.25s-.125-6.375-1-6.75c-3 2.625-5.5 16.5-6.375 34.625-.125 4 .625 15.25.625 15.25h41.25s-1-9-1-14.625c.375-21.25 8.5-38.375 23.375-51.5"/><path d="M387.2 433.113h-60.75c-3.75 0-6.5.875-8.375 2.75s-3.5 5-4.625 9.625h-5.75v-61.625h5.75c1.125 4.75 2.75 8.125 4.625 9.875s4.625 2.625 8.375 2.625h116.5v6c-4.375 1.25-7.25 3-9 5s-2.625 5-2.625 9.125v54.125c0 4 .875 7.125 2.5 9.125 1.75 2 4.625 3.75 9.125 5v4.625c-46.625 28.625-91.75 42.875-135.5 42.875-39.75 0-72-10.126-97.125-30.25-31.5-25.376-47.375-60.75-47.375-106.126 0-42.125 14-75.625 42.125-100.625 26.5-23.625 61.875-35.5 106.125-35.5 14 0 27.25 1.5 39.75 4.125 12.375 2.75 26.5 7.375 42.25 14 8.125 3.5 15.25 5.875 18.75 5.875 2.5 0 5.5-1.5 8.75-4.5l5 2.875-28.375 62.5-5.5-2.125c-.125-4.125-2-8-2.875-9.875-1-1.875-3.125-4.125-6.5-6.75-7.375-5.875-18-11-32.25-15-14.125-4.125-27.625-6.25-40.125-6.25-25.75 0-46.875 7.625-64 23.125-19 17.5-28.625 40.5-28.625 69.125 0 27.75 9.25 50.125 27.875 67.25 17 15.75 39.5 23.5 67.375 23.5 13.625 0 27-1.75 40.125-5 13.125-3.5 24.5-8.125 34.25-13.875v-35.625z"/>
</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 UGG 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.