How to use the Vans icon
import { VansLogo } from "@/assets/icons/vansLogo"
export default function Example() {
return <VansLogo width="32px" height="32px" />
}Brands icon
Vans JSX Icon
Copy the Vans icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentVansLogo
FilevansLogo.jsx
CategoryBrands
Copy-ready code
Vans React JSX component
// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/1115267143
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const VansLogo = ({ width = "40px", height = "40px", color = "#000000", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 791.429 320" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<path d="M376.863 262.876c-5.457 12.8 5.142 33.082-10.13 37.058l-474.417-1.59-50.335 1.045-7.124 10.893-59.377 225.253-8.224 3.736-80.14-1.405-7.526-15.631c-22.309-91.838-47.406-182.15-68.876-273.88 20.533-2.69 44.454-4.247 65.303.143 21.731 67.089 31.611 138.491 50.543 207.955l2.483 2.015 5.86-6.623 51.1-200.363 5.718-4.793 538.804.872c15.435 4.814 47.667-11.002 46.338 15.315" transform="translate(394.286 -235.22)"/><path d="M377.604 349.398c1.34 15.076-13.006 28.899-23.474 37.7-19.531-8.67-43.637-26.556-67.645-13.627-7.505 5.632-12.777 15.74-7.298 24.074 33.245 24.868 92.568 11.317 105.073 61.762 6.176 21.71 1.23 49.475-15.97 64.856-27.71 25.849-67.895 31.317-106.63 20.174-16.992-7.582-35.99-12.68-50.706-26.296 5.654-15.435 15.61-28.637 26.296-40.162 21.6 5.349 40.423 22.864 67.11 19.738 8.824-.141 19.923-6.241 24.28-15.675 3.149-37.58-44.845-23.06-66.925-33.757-22.461-5.38-40.206-24.541-44.628-46.022-4.346-22.461 1.873-43.996 19.019-58.44 40.15-27.46 103.308-23.126 141.498 5.675M194.223 338.483c1.601 64.53 1.329 131.542-.501 195.723-20.795 5.36-44.203.719-66.229.675-17.788-29.639-28.68-57.982-49.083-87.85-2.582-1.1-3.747 2.341-5.555 3.017l-1.678 82.862c-13.888 7.603-33.517.697-49.628 3.747l-3.54-10.926c.654-60.76-1.732-127.12 3.18-186.66 17.996-3.78 38.3-3.877 58.495-3.082l5.85 4.02 45.249 81.347 6.285-1.209c-1.558-23.975 3.66-54.334 2.342-80.967 15.555-6.633 38.212-3.006 54.813-.697M-81.912 444.188c-1.373-16.002-7.963-31.459-14.662-45.315-9.074 12.473-8.747 30.14-12.668 44.803 7.418 6.808 19.138 3.453 27.33.512m47.983-56.84L2.355 534.207c-15.5 5.697-35.456 1.405-53.092 1.667-8.703-12.19-3.224-35.522-23.267-38.092-18.638 1.132-42.787-6.155-55.423 8.616l-8.692 30.097c-16.917 2.167-37.265 2.298-52.776-1.754 17.004-66.48 36.6-131.836 57.013-197.182 25.173-4.946 57.645-3.094 83.733-.033zM385.872 315.478c-.403-.186-.98-.284-1.743-.284h-.697v3.279h1.133c.708.022 1.241-.13 1.623-.37.392-.316.588-.774.588-1.384.01-.62-.316-1.045-.904-1.241m-5.316 8.92v-11.077c.708-.022 1.721 0 3.104 0 1.373.022 2.146 0 2.266 0 .915.065 1.645.25 2.211.599.992.512 1.471 1.416 1.471 2.614 0 .948-.24 1.623-.763 2.004-.512.425-1.143.676-1.906.73.708.153 1.22.392 1.58.665.653.555 1.024 1.405 1.013 2.527l.01.97c-.01.108.033.217-.01.348 0 .087.043.218.043.305l.077.36-2.745-.055c-.088-.316-.153-.85-.175-1.536-.01-.643-.076-1.078-.196-1.34a1.43 1.43 0 0 0-.806-.839 4.7 4.7 0 0 0-1.035-.163h-.632l-.631-.022v3.922zm-1.416-11.306c-1.601 1.59-2.397 3.518-2.397 5.784s.817 4.248 2.44 5.882c1.624 1.612 3.54 2.408 5.795 2.375 2.277.043 4.249-.806 5.883-2.418 1.568-1.623 2.385-3.595 2.385-5.839 0-2.266-.817-4.194-2.407-5.773-1.667-1.689-3.584-2.516-5.86-2.516-2.255 0-4.216.827-5.84 2.505m12.865 12.952c-1.971 1.873-4.302 2.843-7.026 2.82-2.832-.032-5.206-.98-7.145-2.897-1.896-1.928-2.832-4.335-2.876-7.134 0-2.92 1.057-5.36 3.148-7.277 1.96-1.852 4.237-2.734 6.895-2.767 2.745 0 5.153.98 7.048 2.93 1.982 2.005 2.952 4.347 2.952 7.114.01 2.853-.97 5.283-2.996 7.21" transform="translate(394.286 -235.22)"/>
</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 Vans 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.