How to use the Patagonia icon
import { PatagoniaLogo } from "@/assets/icons/patagoniaLogo"
export default function Example() {
return <PatagoniaLogo width="32px" height="32px" />
}Brands icon
Patagonia JSX Icon
Copy the Patagonia icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentPatagoniaLogo
FilepatagoniaLogo.jsx
CategoryBrands
Copy-ready code
Patagonia React JSX component
// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/1217098337
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const PatagoniaLogo = ({ width = "40px", height = "40px", color = "#000000", ...props }) => (
<svg {...props} width={width} height={height} viewBox="-1.583 -1.583 286.69 55.915" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<path d="M238.25 0c-2.77 0-6.937 2.313-6.937 5.375 0 2.563 1.798 3.875 4.375 3.875 3.222 0 8.312-1.375 8.312-5.312C244 .688 241.02 0 238.25 0M78.875 2.281c-.344-.077-.375.281-.375.281-2.029 4.52-6.36 7.743-11.187 9.126 0 0-.22.044-.22.312v2.875c0 .421.22.313.22.313h2.718c.307 0 .219.25.219.25v18.25c0 5.436 2.261 8.25 8.125 8.25 5.229 0 5.614-.13 9.75-3.094 0 0 .265-.093.125-.407-.112-.252-1.187-2.78-1.281-3.093-.115-.383-.375-.157-.375-.157-.756.386-.933.376-1.906.376-.967 0-2.625-.376-2.625-2.313V15.438s-.063-.25.28-.25H86.5s.266.132.344-.25c.092-.466.875-4.344.875-4.344s.118-.281-.188-.281h-5.25s-.218.094-.218-.25v-2.25c0-1.342.082-3.108.375-4.594 0 0 .163-.236-.22-.313-.53-.106-2.998-.55-3.343-.625m70.5 2.282c-3.48 0-4.634.937-5.406 3.25 0 0-.524 1.518-.688 2.062-.115.384-.375.281-.375.281-1.721-.266-3.571-.781-6.812-.781-7.023 0-14.375 3.875-14.375 12.875 0 6.376 5.245 10.053 10.625 11 0 0 .85.128 0 .375-1.597.463-4.94 2.449-8.75 3.063 0 0-.379.04-.188.5.094.224 1.15 2.878 1.313 3.312.115.306.5.25.5.25 1.78-.364 6.896.104 7.812.219.801.101 0 .218 0 .218-2.687.458-5.812 2.404-5.812 5.313 0 5.061 5.799 6.25 11.469 6.25 3.866 0 13.187-1.625 13.187-8.437 0-6.83-10.548-8.16-15.719-8.657-.88-.084 0-.25 0-.25 7.714-1.906 16.75-3.947 16.75-13.656 0-7.312-6.062-9.25-6.062-10.5 0-.687.415-1.331 1.187-1.375 1.34-.077 1.396.04 2.063.438 0 0 .197.333.312-.126.068-.27 1.219-4.808 1.282-5.156.077-.421-.282-.312-.282-.312-.673-.065-1.371-.157-2.031-.157M43.313 7.938c-.137.041-.157.218-.157.218s-3.721 9.149-3.875 9.532c-.152.382.125.406.125.406s3.093 1.096 3.438 1.25c.343.152.468-.094.468-.094 1.686-2.074 3.378-3.375 7-3.375 2.836 0 4.25 1.063 4.25 3.625v.969c0 .344-.124.375-.124.375l-8.72.219c-5.733 0-10.374 4.126-10.374 11.375 0 5.813 4.387 9.5 10.25 9.5 3.466 0 6.203-1.494 8.718-3.5 0 0 .417-.652.532 0 .115.65.358 1.487.531 2.218.09.38.344.344.344.344h12.218s.47.155.47-.344v-3.062s.09-.344-.407-.344h-1.406c-.306 0-.25-.562-.25-.562V19.75c0-7.375-4.753-10.375-11.969-10.375-2.55 0-5.004.354-7.406 1.281 0 0-.525.322-.219-.406.146-.347.281-.75.281-.75s.164-.346-.218-.5c-.422-.154-2.858-.892-3.313-1.062a.28.28 0 0 0-.187 0m53.156 0c-.138.041-.156.218-.156.218s-3.722 9.149-3.875 9.532.125.406.125.406 3.092 1.097 3.437 1.25.469-.094.469-.094c1.684-2.074 3.346-3.375 6.969-3.375 2.835 0 4.25 1.063 4.25 3.625v.969c0 .345-.094.375-.094.375l-8.72.219c-5.734 0-10.374 4.125-10.374 11.375 0 5.81 4.386 9.5 10.25 9.5 3.465 0 6.174-1.494 8.687-3.5 0 0 .447-.652.563 0 .115.65.357 1.487.531 2.218.09.38.344.344.344.344h12.187s.5.154.5-.344v-3.062s.091-.344-.406-.344h-1.406c-.306 0-.25-.562-.25-.562V19.75c0-7.375-4.783-10.375-12-10.375-2.549 0-4.971.354-7.375 1.281 0 0-.525.322-.219-.406.146-.347.25-.781.25-.781s.164-.315-.219-.469c-.42-.152-2.827-.892-3.28-1.062a.28.28 0 0 0-.188 0zm157.156 0c-.137.041-.156.218-.156.218s-3.721 9.149-3.875 9.532.125.406.125.406 3.092 1.097 3.437 1.25.469-.094.469-.094c1.684-2.074 3.346-3.375 6.969-3.375 2.835 0 4.25 1.063 4.25 3.625v.969c0 .345-.094.375-.094.375l-8.719.219c-5.736 0-10.375 4.125-10.375 11.375 0 5.81 4.386 9.5 10.25 9.5 3.465 0 6.174-1.494 8.688-3.5 0 0 .446-.652.562 0 .115.65.358 1.487.531 2.218.09.38.344.344.344.344h12.188s.5.154.5-.344v-3.062s.09-.344-.407-.344h-1.406c-.306 0-.25-.562-.25-.562V19.75c0-7.375-4.782-10.375-12-10.375-2.549 0-4.971.354-7.375 1.281 0 0-.526.322-.219-.406.145-.347.25-.781.25-.781s.164-.315-.218-.469c-.422-.152-2.828-.892-3.282-1.062a.28.28 0 0 0-.187 0zm-81.281 1.437c-10.244 0-18.156 6.186-18.156 16.25 0 10.124 7.912 16.313 18.156 16.313 10.31 0 18.25-6.19 18.25-16.313 0-10.064-7.94-16.25-18.25-16.25m43.25 0c-4.307 0-7.535 2.39-10.719 4.813 0 0-.312.436-.312-.063v-4.5c0-.345-.313-.156-.313-.156l-13.594 3.594s-.281 0-.281.343v3.125c0 .345.313.188.313.188s1.196-.284 1.656-.438c.459-.153.312.219.312.219v20.469s.088.281-.218.281h-1.844s-.219-.101-.219.281v3.157c0 .42.219.312.219.312h16.125s.219.05.219-.219v-3.25c0-.382-.313-.281-.313-.281h-1.937c-.307 0-.25-.219-.25-.219V19.72c0-.307.218-.469.218-.469 1.47-1.237 2.983-2.375 5.063-2.375 1.738 0 3.406.939 3.406 2.75v17.406s.088.219-.219.219h-1.875s-.343-.025-.343.281v3.25c0 .269.28.219.28.219h15.845s.312.109.312-.312V37.53c0-.343-.281-.281-.281-.281h-1.688c-.267 0-.218-.312-.218-.312V18.25c0-3.439-1.16-8.875-9.344-8.875m-193.438.031c-2.857 0-5.03 1.161-7.781 2.813 0 0-.312.15-.312-.157V9.72c0-.344-.313-.25-.313-.25L.281 12.937s-.281 0-.281.344v3.125c0 .421.313.281.313.281l1.562-.375s.375-.17.375.25v29.97s.015.437-.406.437H.375S0 46.915 0 47.375v2.937c0 .422.5.407.5.407h17.406s.344-.132.344-.438v-2.906c0-.421-.375-.406-.375-.406h-3.437c-.384 0-.376-.532-.376-.532v-5.406c0-.306.25-.187.25-.187 1.73.88 4.166 1.125 6 1.125 9.537 0 15.063-8.813 15.063-17.625 0-8.938-5.809-14.938-13.219-14.938m221.157.031c-.078-.007-.157.032-.157.032l-13.531 3.718s-.25.013-.25.282v3.03c0 .422.375.25.375.25s.886-.19 1.656-.312c.387-.063.282.295.282.563v19.937s.102.313-.282.313H229.5s-.25-.109-.25.312v3.188c0 .382.25.25.25.25h15.844c.382 0 .25-.313.25-.313s-.01-2.628 0-3.125c.01-.422-.281-.312-.281-.312h-1.563c-.383 0-.281-.281-.281-.281V9.687c0-.192-.08-.243-.156-.25m-107.72 3.875c4.835 0 6.813 9.437 6.813 12.813 0 2.999-.96 4.187-3.343 4.187-4.833 0-6.844-9.437-6.844-12.812 0-3.001.991-4.188 3.375-4.188m34.75.813c6.51 0 8.47 11.501 8.47 16 0 3.375-.928 7.062-4.407 7.062-6.507 0-8.437-11.5-8.437-16 0-2.313-.01-7.062 4.375-7.062M15.907 16.03c1.998 0 7.688.564 7.688 11.813 0 7-1.698 9.375-5.563 9.375-3.092 0-3.968-2.313-3.968-5.063V16.812c0-.422.343-.53.343-.53zm36.782 8.781h1.562c.383 0 .313.25.313.25v5.75c0 2.375-.6 4.563-3.563 4.563-3.159 0-3.844-2.75-3.844-5.188 0-3.187 2.309-5.375 5.532-5.375m53.156 0h1.562c.383 0 .282.25.282.25v5.75c0 2.375-.568 4.563-3.532 4.563-3.156 0-3.875-2.749-3.875-5.188 0-3.187 2.342-5.375 5.563-5.375m157.156 0h1.563c.382 0 .28.25.28.25v5.75c0 2.375-.565 4.563-3.53 4.563-3.157 0-3.875-2.749-3.875-5.188 0-3.187 2.34-5.375 5.562-5.375M137.594 42.375c.077 0 .125.031.125.031 2.122 1.293 3.656 2.268 3.656 5.031 0 1.562-.826 2.313-2.437 2.313-1.806 0-2.657-1.689-2.657-3.25 0-1.379.496-3.443.969-3.938.143-.15.266-.187.344-.187M280.205 5.501q-.307-.166-.988-.166h-.696V6.95h.737q.518 0 .777-.099.477-.183.477-.698 0-.486-.307-.653m-.865-.729q.844 0 1.236.163.703.292.702 1.145 0 .604-.438.891-.233.151-.649.219.52.083.761.441.241.357.241.698v.33q0 .155.013.335a.7.7 0 0 0 .042.233l.03.057h-.743l-.011-.045-.012-.05-.016-.145v-.357q0-.779-.434-1.03-.257-.144-.902-.143h-.639v1.77h-.765V4.772zm-2.423-.22a3.4 3.4 0 0 0-1.034 2.494q0 1.472 1.028 2.51 1.033 1.037 2.51 1.038 1.476 0 2.509-1.038a3.42 3.42 0 0 0 1.033-2.51q.001-1.462-1.033-2.495a3.42 3.42 0 0 0-2.509-1.037q-1.466 0-2.504 1.037m5.405 5.398q-1.2 1.207-2.907 1.206-1.706 0-2.903-1.206-1.19-1.2-1.19-2.91 0-1.692 1.203-2.892 1.195-1.195 2.89-1.195 1.706 0 2.907 1.195 1.204 1.196 1.203 2.893 0 1.703-1.203 2.909"/>
</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 Patagonia 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.