How to use the Crocs icon
import { CrocsLogo } from "@/assets/icons/crocsLogo"
export default function Example() {
return <CrocsLogo width="32px" height="32px" />
}Brands icon
Crocs JSX Icon
Copy the Crocs icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentCrocsLogo
FilecrocsLogo.jsx
CategoryBrands
Copy-ready code
Crocs React JSX component
// Source: https://commons.wikimedia.org/wiki/Special:PermanentLink/1114807885
// Asset license: Public domain textlogo
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const CrocsLogo = ({ width = "40px", height = "40px", color = "#000000", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 336.798 72.725" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<g><g><path d="M2665 5114c-16-2-73-9-125-15-692-79-1309-443-1668-984-321-483-438-1094-327-1700 181-983 956-1683 2006-1811 159-20 492-22 653-5 475 51 837 195 1172 467 102 83 252 228 327 319 250 300 162 758-181 938-187 99-379 100-572 6-70-35-104-61-205-159-208-202-369-303-571-357-89-24-117-26-279-27-215-1-300 17-460 94-216 105-367 283-449 530-52 155-69 269-69 450 0 223 36 395 115 555 163 328 458 500 853 498 330-2 624-155 834-434 235-313 678-346 951-70 132 132 185 263 184 451-2 212-62 327-315 594-295 311-641 513-1032 600-203 46-308 57-567 61-135 2-258 1-275-1M11580 5109c-1023-106-1821-762-2055-1688-80-318-92-672-35-989 140-766 644-1371 1389-1667 613-243 1374-239 1980 11 731 302 1224 910 1355 1669 55 315 40 670-40 989-68 269-203 549-375 778-86 115-314 340-434 429-356 264-776 421-1254 469-121 12-409 11-531-1m495-1194c391-75 660-368 739-806 47-262 18-571-75-791-98-230-272-407-486-495-128-52-217-67-398-67-146 0-183 3-260 23-386 100-634 387-711 824-22 123-22 361 0 486 88 490 388 787 851 841 86 10 246 3 340-15M17050 5105c-569-71-1035-282-1403-635-545-522-774-1300-616-2093 98-492 355-930 731-1244 175-146 422-290 643-376 338-131 756-193 1140-167 524 34 884 158 1250 429 122 90 379 344 430 424 104 166 128 364 65 544-90 256-350 428-620 409-178-12-267-56-439-220-260-247-433-344-684-382-202-31-444-3-611 71-271 120-459 385-522 735-21 117-24 381-5 495 66 404 310 691 665 784 418 110 845-37 1106-380 79-103 147-162 244-209 185-92 377-92 561-1 217 108 346 314 348 556 1 166-46 291-160 431-336 411-690 651-1131 765-204 53-349 70-627 74-178 3-283 0-365-10M21570 5113c-320-30-537-84-746-184-371-177-591-449-685-849-26-109-37-423-20-553 66-498 368-854 901-1065 127-50 294-99 575-167 601-145 678-173 725-265 27-52 27-147 1-198-56-109-177-150-473-159-413-13-671 68-1036 328-137 98-199 126-317 141-245 33-492-125-578-370-30-86-30-254 1-344 22-62 76-155 119-203 72-81 310-254 468-340 453-247 1082-348 1730-279 707 76 1156 383 1318 899 51 163 77 337 77 522 0 359-112 637-348 865-251 242-577 389-1135 514-504 112-611 143-705 203-81 53-106 100-107 197 0 60 4 76 28 112 49 75 135 113 297 133 328 40 676-73 980-318 128-103 231-143 370-143 179 0 331 79 436 226 115 161 131 358 45 539-43 91-110 169-241 280-324 275-703 426-1189 475-94 9-407 12-491 3M6197 5050c-246-39-437-181-543-404-68-143-65-42-62-1849l3-1632 30-85c75-215 250-381 475-452 95-29 269-32 370-5 194 51 369 195 455 372 69 143 68 126 75 800 6 566 8 618 28 729 27 143 45 214 79 309 140 389 416 647 776 723 100 21 188 17 328-13 172-36 353-38 454-5 107 36 201 96 290 186 136 138 199 292 199 486-1 127-19 205-74 315-77 154-172 245-345 331-172 85-232 98-465 98-223 0-330-15-502-70-252-81-505-230-700-412-36-34-68-62-72-62-3 0-6 14-6 31 0 90-79 269-162 367-91 107-225 191-360 226-76 19-200 27-271 16" transform="matrix(.01282 0 0 -.01282 7.939 75.412)"/></g><g><path d="M2385.709 107.975h1.978V97.163q0-4.35.23-6.823.231-2.473 1.286-4.253 1.054-1.845 3.033-3 1.977-1.153 4.417-1.153 3.428 0 6.197 2.57a7.6 7.6 0 0 1 2.34 4.187q.495 2.473.495 7.022v12.262h6.593q3.824 0 5.834 1.813t2.011 4.648q0 3.626-2.868 5.076t-8.208 1.45h-3.362v33.096q0 4.22.297 6.494.296 2.274 1.582 3.692 1.285 1.417 4.186 1.417 1.583 0 4.286-.56t4.219-.56q2.175 0 3.923 1.747 1.747 1.747 1.747 4.318 0 4.35-4.747 6.659-4.747 2.307-13.647 2.307-8.44 0-12.79-2.835t-5.703-7.845q-1.35-5.01-1.351-13.383v-34.546h-2.374q-3.889 0-5.933-1.846t-2.044-4.681 2.143-4.648 6.23-1.813M2492.313 144.301v23.932q0 5.67-2.57 8.504-2.572 2.835-6.791 2.835-4.088 0-6.626-2.835t-2.538-8.504v-28.679q0-6.79-.462-10.548-.46-3.758-2.505-6.164-2.043-2.407-6.46-2.407-8.835 0-11.637 6.066t-2.802 17.404v24.328q0 5.604-2.538 8.471t-6.692 2.868q-4.087 0-6.691-2.868t-2.604-8.471v-51.49q0-5.076 2.34-7.713t6.164-2.637q3.692 0 6.164 2.472 2.473 2.472 2.473 6.824v1.714q4.68-5.604 10.02-8.241t11.868-2.637q6.79 0 11.669 2.703 4.878 2.703 8.043 8.175 4.549-5.538 9.757-8.208t11.537-2.67q7.384 0 12.724 2.9t7.978 8.307q2.307 4.88 2.307 15.361v35.14q0 5.67-2.571 8.504-2.572 2.835-6.79 2.835-4.089 0-6.692-2.868-2.604-2.868-2.604-8.471v-30.261q0-5.802-.495-9.296-.495-3.495-2.67-5.867-2.175-2.373-6.593-2.374-3.56 0-6.757 2.11-3.198 2.11-4.978 5.67-1.977 4.549-1.978 16.086" transform="matrix(.1288 0 0 .12754 7.939 -.85)"/></g></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 Crocs 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.