How to use the Clarks icon
import { ClarksLogo } from "@/assets/icons/clarksLogo"
export default function Example() {
return <ClarksLogo width="32px" height="32px" />
}Brands icon
Copy the Clarks icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
Copy-ready code
// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/1115258341
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const ClarksLogo = ({ width = "40px", height = "40px", color = "#000000", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 392.315 105.465" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<path d="M1423.69 139.656c-11.17-9.668-26.94-15.972-41.03-16.031-17.81-.062-33.01 9.859-33.09 35.602-.19 63.949 86.82 121.324 144.83 120.886-12.82-50.203-22.77-99.05-70.71-140.457m1092.89-6.621c-83.31 23.852-126.18 76.606-142.89 124.278 27.28 22.878 61.14 43.171 94.33 65.164 19.31 12.812 24.64 25.945 32.4 46.269 9.37 24.496 18.77 59.152 19.25 76.508.36 12.605-.6 22.375-16.66 21.805-15.51-.516-69.3-35.34-82.45-44.317-73.53-50.109-136.2-111.281-190.39-181.758 24.51 99.196 52.49 245.547 64.49 319.778 3.87 23.933 10.32 56.621-2.96 78.73-10.21 17.012-38.89 50.492-61.47 63.301-21.58 12.207-32.74-2.305-36.73-21.941-14.46-71.52-22.61-110.954-34.54-169.457-16.94-83.219-32.03-149.516-69.59-242.633-21.16-52.485-68.9-145.063-122.61-145.278-52.44-.175-33.59 126.899-33.7 161.278-.05 12.215-2.02 41.972-30.88 48.484-96.62 21.731-111.14 53.094-130.24 49.703-11.88-2.094-18.83-12.984-23.7-29.039-19.2-63.933-29.81-121.519-67.4-178.551-17.5-26.543-49.8-57.886-74.56-58.007-24.89-.079-33.39 22.152-33.39 44.375 0 62.421 17.38 125.964 25.33 161.656 5.91 26.582-8.43 31.328-22.14 35.305-17.65 5.136-39.58 5.859-47.69 5.82-74.93-.266-144.4-24.336-202.32-71.867-24.21-19.875-43.65-44.157-63.61-68.161-21.98-26.382-86.91-106.406-125.79-106.542-26.99-.079-30 30.429-30.07 51.328-.3 92.289 44.42 232.992 77.37 317.199 21.92 55.961 45.12 106.586 52.25 136.469 5.87 24.644-.69 46.57-14.28 64.925-18.19 24.563-38.38 41.793-56.56 50.149-12.82 5.906-25.26 2.406-33.93-9.828-14.27-20.18-32.97-61.11-40.38-77.164-57.81-125.379-101.273-271.625-100.789-410.207.239-74.317 8.547-210.348 110.299-210.016 56.08.191 105.08 34.258 140.83 75.113 7.01-48.101 45.15-75.308 98.15-75.113 58.45.191 111.63 33.633 147.32 77.906 11.62-48.941 50-78.101 100.04-77.906 120.29.406 191.69 132.77 223.64 231.891 3.77-2.457 10.12-4.176 10.12-4.176-.9-11.43-1.68-28.867-1.66-42.563.12-77.847 18.66-185.484 120.1-185.152 86.53.27 142.21 80.547 182.04 146.91h2.42c-6.98-45.137-16.2-81.68-19.26-127.793-1.31-19.781 26.8-18.008 39.37-18.008 61.83 0 59.24 14.692 75.78 67.407 10.84 34.531 36.82 60.347 62.6 84.332 13.1-27.75 42.07-74.879 84.88-110.86 26.36-22.168 63.41-41.25 95.69-41.148 14.01.039 20.98 1.89 31.64 10.133 22.27 17.265 39.77 54.164 41.81 67.382 1.95 12.524-8.58 20.762-19.51 23.887" transform="matrix(.13333 0 0 -.13333 0 105.466)"/><path d="M2837.26 202.391c3.64-57.813-39.88-100.133-98.44-131.817-61.52-33.238-132.45-50.816-185.45-46.226-11.31.972-18.69 8.843-16.23 25.562 2.3 15.606 7.51 29.492 13.34 40.844 8.12 15.738 19.87 26.441 42.73 29.004 14.23 1.621 43.36 2.246 67.86 9.844 28.55 8.867 58.53 22.3 58.53 46.191 0 42.305-185.9 18.238-185.9 101.25 0 84.223 138.71 123.766 192.64 138.887 24.27 6.812 52.15 10.465 62.86 10.465 13.01 0 18.5-8.434 16.08-19.801-5.38-25.211-16.92-56.043-44.86-63.043-12.34-3.067-78.18-16.203-99.9-26.731-6.7-3.25-10.54-7.918-10.5-12.617.01-5.906 7.15-9.336 18.96-12.422 47.86-12.316 163.75-18.566 168.28-89.39M961.25 33.309c-18.73-.016-36.465 2.289-54.973 4.691-64.89 8.395-124.351 13.16-183.191 13.16-119.961 0-213.691-11.48-319.758-27.535C320.43 11.085 250.52 2.219 186.121.265 95.195-2.526 0 15.73 0 126.634c0 130.055 144.043 290.34 279.766 399.015C411.121 630.793 555.605 705.352 649.043 743c62.336 25.148 138.555 47.996 186.035 47.996 45.75 0 38.594-40.402 4.981-98.144-31.653-54.36-45.879-68.235-90.149-73.782-76.902-9.699-187.117-19.007-396.617-179.129-119.23-91.109-227.57-217.336-225.664-282.39 1.16-41.172 31.766-54.399 69.207-54.399 54.934 0 117.195 11.758 195.879 26.114 123.457 22.5 277.265 54.359 406.699 54.359 34.863 0 67.578-3.789 97.129-11.352 22.668-5.796 37.195-18.906 51.926-38.242 12.027-15.722 22.625-33.941 30.789-50.523 7.39-15.102 13.68-30.317 8.906-39.985-3.113-6.289-10.344-10.214-26.914-10.214M2889.08 82.39c2.13 0 4.15.06 6.07.2 1.91.152 3.59.523 5.09 1.187 1.49.649 2.69 1.645 3.55 3.008.89 1.352 1.35 3.203 1.35 5.649 0 2.047-.41 3.652-1.18 4.879-.81 1.195-1.84 2.128-3.07 2.777-1.29.68-2.72 1.133-4.34 1.328-1.63.215-3.26.391-4.83.391h-12.54V82.391Zm4.18 27.075c7.27 0 12.64-1.465 16.13-4.36 3.48-2.847 5.23-7.246 5.23-13.101 0-5.488-1.55-9.492-4.6-12.07-3.09-2.559-6.89-4.043-11.45-4.512l17.45-26.953h-10.2l-16.6 26.25h-10.04v-26.25h-9.49v60.996zm-43.04-48.07c2.18-5.45 5.23-10.157 9.06-14.16a41.6 41.6 0 0 1 13.69-9.415c5.25-2.304 10.96-3.433 17.1-3.433 6.04 0 11.66 1.129 16.86 3.433a41.7 41.7 0 0 1 13.62 9.414c3.86 4.004 6.88 8.711 9.06 14.16 2.19 5.454 3.29 11.372 3.29 17.794 0 6.234-1.1 12.035-3.29 17.406-2.18 5.426-5.2 10.117-9.06 14.019-3.86 3.965-8.41 7.114-13.62 9.375-5.2 2.309-10.82 3.418-16.86 3.418-6.14 0-11.85-1.109-17.1-3.418a42.3 42.3 0 0 1-13.69-9.375c-3.83-3.902-6.88-8.593-9.06-14.02q-3.27-8.054-3.27-17.406c0-6.421 1.09-12.34 3.27-17.792m-8.58 38.3c2.8 6.289 6.56 11.782 11.39 16.446 4.77 4.668 10.36 8.3 16.73 10.937 6.37 2.695 13.15 3.985 20.31 3.985 7.14 0 13.89-1.29 20.2-3.985 6.35-2.637 11.89-6.269 16.62-10.937 4.76-4.664 8.53-10.157 11.31-16.446 2.8-6.328 4.16-13.18 4.16-20.507 0-7.54-1.36-14.47-4.16-20.88-2.78-6.367-6.55-11.89-11.31-16.581-4.73-4.707-10.27-8.36-16.62-10.973-6.31-2.602-13.06-3.89-20.2-3.89-7.16 0-13.94 1.288-20.31 3.89-6.37 2.613-11.96 6.266-16.73 10.973-4.83 4.691-8.59 10.214-11.39 16.582-2.77 6.41-4.18 13.34-4.18 20.879 0 7.328 1.41 14.18 4.18 20.507" transform="matrix(.13333 0 0 -.13333 0 105.466)"/>
</svg>
)
import { ClarksLogo } from "@/assets/icons/clarksLogo"
export default function Example() {
return <ClarksLogo width="32px" height="32px" />
}Built for the web
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.
Yes. You can copy the JSX component and use it in React and Next.js projects.
Yes. Edit the SVG attributes or pass className, width, height and color props depending on the component.