Icons
Tailwind CSS Icons
Tailwind CSS SVG icons are scalable vector graphic (SVG) icons that can be easily integrated into web applications using Tailwind CSS utility classes. Use a free and open-source set of SVG icons from our Pagedone Icons library. You can customize icons and change the size, color, and stroke of them.
You can find icons that we have used on the Pagedone Icons page , where you can also copy or download icons in SVG format that can be used to integrate the icons into your project. All icons are perfectly compatible with your Tailwind CSS.
SVG Icons
SVG icons in Tailwind CSS can be easily integrated into your project using Tailwind CSS utility classes. Tailwind CSS provides utility classes for manipulating SVG icons, such as controlling size, color, alignment, and adding hover effects.
<div class="flex items-center gap-8 justify-normal flex-wrap">
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2.45454 13.8454C1.84662 12.7241 1.84662 11.365 2.45454 10.2437C4.29529 6.8486 7.87972 4.54456 12 4.54456C16.1203 4.54456 19.7047 6.8486 21.5455 10.2437C22.1534 11.365 22.1534 12.7241 21.5455 13.8454C19.7047 17.2405 16.1203 19.5446 12 19.5446C7.87972 19.5446 4.29529 17.2405 2.45454 13.8454Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M15.0127 12C15.0127 13.6569 13.6695 15 12.0127 15C10.3558 15 9.0127 13.6569 9.0127 12C9.0127 10.3431 10.3558 9 12.0127 9C13.6695 9 15.0127 10.3431 15.0127 12Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_425_4503)">
<path
d="M13.9 14.7C13.3 15.3 12.6 15.6 11.8 15.6C11 15.6 10.2 15.3 9.70005 14.7C9.10005 14.1 8.80005 13.4 8.80005 12.6C8.80005 11.8 9.10005 11 9.70005 10.5L11.8 12.6L13.9 14.7Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M4 4.7998L19.6 20.3998" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path
d="M17.7 18.4998C16 19.5998 14 20.1998 11.8 20.1998C7.70003 20.1998 4.10002 17.8998 2.30002 14.4998C1.60002 13.3998 1.60002 11.9998 2.30002 10.8998C3.20002 9.19981 4.50002 7.7998 6.10002 6.7998"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M8.40002 5.7001C9.50002 5.3001 10.6 5.1001 11.8 5.1001C15.9 5.1001 19.5 7.4001 21.3 10.8001C21.9 11.9001 21.9 13.3001 21.3 14.4001C20.8 15.3001 20.2 16.1001 19.5 16.8001"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</g>
<defs>
<clipPath id="clip0_425_4503">
<rect width="21.6" height="17.2" fill="white" transform="translate(1 4)"></rect>
</clipPath>
</defs>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M8.52464 15.8154C9.58965 17.0907 9.4241 18.9921 8.15487 20.0622C6.88565 21.1324 4.99338 20.966 3.92838 19.6907C2.86337 18.4153 3.02892 16.5139 4.29815 15.4438C5.56737 14.3737 7.45964 14.54 8.52464 15.8154ZM8.52464 15.8154L19.2493 6.77295"
stroke="#111827" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path
d="M8.71703 8.18462C7.65202 9.45996 5.75975 9.62631 4.49053 8.55617C3.22131 7.48603 3.05575 5.58464 4.12076 4.3093C5.18576 3.03395 7.07803 2.8676 8.34726 3.93774C9.61648 5.00788 9.78203 6.90927 8.71703 8.18462ZM8.71703 8.18462L19.4416 17.227"
stroke="#111827" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M17 12H19M21 12H22" stroke="#111827" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 25 25" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12.4816 7.45885C15.7931 6.35499 17.4489 5.80306 18.323 6.67709C19.197 7.55112 18.6451 9.20691 17.5412 12.5185L15.8077 17.7189C14.5993 21.3442 13.9951 23.1568 12.7092 23.2878C11.4233 23.4188 10.4659 21.7653 8.5513 18.4582L8.34896 18.1087C8.08327 17.6497 7.95042 17.4203 7.7651 17.235C7.57977 17.0496 7.35031 16.9168 6.8914 16.6511L6.54189 16.4488C3.23479 14.5341 1.58124 13.5768 1.71224 12.2909C1.84324 11.005 3.65587 10.4007 7.28113 9.19233L12.4816 7.45885Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M11.5615 13.4385L7.81384 17.1861" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M8.4223 9.15539C9.9834 6.0332 10.7639 4.47211 12 4.47211C13.2361 4.47211 14.0166 6.0332 15.5777 9.15539L18.0292 14.0584C19.7382 17.4763 20.5927 19.1853 19.776 20.1872C18.9594 21.1891 17.1132 20.6968 13.4209 19.7122L13.0307 19.6081C12.5183 19.4715 12.2621 19.4032 12 19.4032C11.7379 19.4032 11.4817 19.4715 10.9694 19.6081L10.5792 19.7122C6.88682 20.6968 5.04065 21.1891 4.224 20.1872C3.40735 19.1853 4.26183 17.4763 5.9708 14.0584L8.4223 9.15539Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M12 14.0975L12 19.3975" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14 5C14 6.10457 13.1046 7 12 7C10.8954 7 10 6.10457 10 5C10 3.89543 10.8954 3 12 3C13.1046 3 14 3.89543 14 5Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M7 17C7 18.1046 6.10457 19 5 19C3.89543 19 3 18.1046 3 17C3 15.8954 3.89543 15 5 15C6.10457 15 7 15.8954 7 17Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M21 17C21 18.1046 20.1046 19 19 19C17.8954 19 17 18.1046 17 17C17 15.8954 17.8954 15 19 15C20.1046 15 21 15.8954 21 17Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M4 12.9624C4 9.98729 5.60879 7.38975 8 6M16 6C18.3912 7.38975 20 9.98729 20 12.9624M8 19.9247C9.17669 20.6086 10.5429 21 12 21C13.4571 21 14.8233 20.6086 16 19.9247"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3C11.8284 3 13.2426 3 14.1213 3.87868C15 4.75736 15 6.17157 15 9C15 11.8284 15 13.2426 14.1213 14.1213C13.2426 15 11.8284 15 9 15C6.17157 15 4.75736 15 3.87868 14.1213C3 13.2426 3 11.8284 3 9Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M9 15C9 17.8284 9 19.2426 9.87868 20.1213C10.7574 21 12.1716 21 15 21C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15C21 12.1716 21 10.7574 20.1213 9.87868C19.2426 9 17.8284 9 15 9"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.8665 3H4.13346C2.95518 3 2 3.95518 2 5.13346C2 5.68299 2.21204 6.21132 2.59195 6.60838L8.20426 12.4741C8.36416 12.6412 8.44411 12.7248 8.51678 12.8098C9.08638 13.4759 9.42142 14.3107 9.47039 15.1858C9.47664 15.2975 9.47664 15.4131 9.47664 15.6444V18.5028C9.47664 20.2241 11.162 21.4401 12.7955 20.8975C13.8271 20.5548 14.5234 19.5899 14.5234 18.5028V16.1342C14.5234 15.4206 14.5234 15.0638 14.5826 14.7234C14.6787 14.1714 14.8896 13.6458 15.2018 13.1805C15.3943 12.8936 15.641 12.6358 16.1343 12.1202L21.4081 6.60838C21.788 6.21132 22 5.68299 22 5.13346C22 3.95518 21.0448 3 19.8665 3Z"
stroke="#111827" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 12C3 11.0572 3 10.5858 3.29289 10.2929C3.58579 10 4.05719 10 5 10C5.94281 10 6.41421 10 6.70711 10.2929C7 10.5858 7 11.0572 7 12V19C7 19.9428 7 20.4142 6.70711 20.7071C6.41421 21 5.94281 21 5 21C4.05719 21 3.58579 21 3.29289 20.7071C3 20.4142 3 19.9428 3 19V12Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M19.9619 15.8933L20.654 11.2976C20.8148 10.2293 20.8953 9.69514 20.5961 9.34747C20.2968 8.99981 19.7566 8.99981 18.6763 8.99981H15.5695C15.0382 8.99981 14.7725 8.99981 14.5674 8.90142C14.3623 8.80299 14.1968 8.63753 14.0984 8.43236C14 8.22728 14 7.96161 14 7.43026C14 5.80513 14 4.99255 13.7027 4.63226C13.4083 4.27558 12.9467 4.10212 12.4903 4.17672C12.0293 4.25208 11.4942 4.8636 10.424 6.08664L7.49485 9.43427C7.25015 9.71393 7.12779 9.85376 7.0639 10.0238C7 10.1939 7 10.3797 7 10.7513V14.9998C7 17.8282 7 19.2425 7.87868 20.1211C8.75736 20.9998 10.1716 20.9998 13 20.9998H14.0288C16.4923 20.9998 17.7241 20.9998 18.5679 20.2736C19.4116 19.5474 19.595 18.3294 19.9619 15.8933Z"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M8 7.9263C8 2.69123 16 2.69123 16 7.9263C16 11.666 12.3649 10.9198 12.3649 15.4058"
stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
<path d="M11.975 20.0092L12.025 20.0092" stroke="black" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M11.95 15.9412L11.95 9.94116" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
<path d="M11.95 7L12 7" stroke="black" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4 12.4434L8.14339 16.5868C8.81006 17.2535 9.14339 17.5868 9.5576 17.5868C9.97182 17.5868 10.3051 17.2535 10.9718 16.5868L20.001 7.55762"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M7.75732 7.75745L16.2426 16.2427" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
<path d="M16.2426 7.75745L7.75732 16.2427" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M6 12H18" stroke="#111827" stroke-width="1.6" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 6V18" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M18 12H6" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.5 9C19.8807 9 21 10.1193 21 11.5V15C21 17.8284 21 19.2426 20.1213 20.1213C19.2426 21 17.8284 21 15 21H9C6.17157 21 4.75736 21 3.87868 20.1213C3 19.2426 3 17.8284 3 15V11.5C3 10.1193 4.11929 9 5.5 9"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M12 16L7.80408 11.804M12 16L16.196 11.804M12 16V3" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M18.364 5.63599L5.63605 18.3639" stroke="black" stroke-width="1.6"
stroke-linecap="square" class="my-path"></path>
<path
d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5 7L5.29949 14.7868C5.41251 17.7252 5.46902 19.1944 6.40719 20.0972C7.34537 21 8.81543 21 11.7555 21H12.2433C15.1842 21 16.6547 21 17.5928 20.0972C18.531 19.1944 18.5875 17.7252 18.7006 14.7868L19 7"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path
d="M20.4706 4.43329C18.6468 4.27371 17.735 4.19392 16.8229 4.13611C13.6109 3.93249 10.3891 3.93249 7.17707 4.13611C6.26506 4.19392 5.35318 4.27371 3.52942 4.43329"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path
d="M13.7647 3.95212C13.7647 3.95212 13.3993 2.98339 11.6471 2.9834C9.8949 2.9834 9.52942 3.95211 9.52942 3.95211"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 6.5C3 5.09554 3 4.39331 3.33706 3.88886C3.48298 3.67048 3.67048 3.48298 3.88886 3.33706C4.39331 3 5.09554 3 6.5 3C7.90446 3 8.60669 3 9.11114 3.33706C9.32952 3.48298 9.51702 3.67048 9.66294 3.88886C10 4.39331 10 5.09554 10 6.5C10 7.90446 10 8.60669 9.66294 9.11114C9.51702 9.32952 9.32952 9.51702 9.11114 9.66294C8.60669 10 7.90446 10 6.5 10C5.09554 10 4.39331 10 3.88886 9.66294C3.67048 9.51702 3.48298 9.32952 3.33706 9.11114C3 8.60669 3 7.90446 3 6.5Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M14 6.5C14 5.09554 14 4.39331 14.3371 3.88886C14.483 3.67048 14.6705 3.48298 14.8889 3.33706C15.3933 3 16.0955 3 17.5 3C18.9045 3 19.6067 3 20.1111 3.33706C20.3295 3.48298 20.517 3.67048 20.6629 3.88886C21 4.39331 21 5.09554 21 6.5C21 7.90446 21 8.60669 20.6629 9.11114C20.517 9.32952 20.3295 9.51702 20.1111 9.66294C19.6067 10 18.9045 10 17.5 10C16.0955 10 15.3933 10 14.8889 9.66294C14.6705 9.51702 14.483 9.32952 14.3371 9.11114C14 8.60669 14 7.90446 14 6.5Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M14 17.5C14 16.0955 14 15.3933 14.3371 14.8889C14.483 14.6705 14.6705 14.483 14.8889 14.3371C15.3933 14 16.0955 14 17.5 14C18.9045 14 19.6067 14 20.1111 14.3371C20.3295 14.483 20.517 14.6705 20.6629 14.8889C21 15.3933 21 16.0955 21 17.5C21 18.9045 21 19.6067 20.6629 20.1111C20.517 20.3295 20.3295 20.517 20.1111 20.6629C19.6067 21 18.9045 21 17.5 21C16.0955 21 15.3933 21 14.8889 20.6629C14.6705 20.517 14.483 20.3295 14.3371 20.1111C14 19.6067 14 18.9045 14 17.5Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M3 17.5C3 16.0955 3 15.3933 3.33706 14.8889C3.48298 14.6705 3.67048 14.483 3.88886 14.3371C4.39331 14 5.09554 14 6.5 14C7.90446 14 8.60669 14 9.11114 14.3371C9.32952 14.483 9.51702 14.6705 9.66294 14.8889C10 15.3933 10 16.0955 10 17.5C10 18.9045 10 19.6067 9.66294 20.1111C9.51702 20.3295 9.32952 20.517 9.11114 20.6629C8.60669 21 7.90446 21 6.5 21C5.09554 21 4.39331 21 3.88886 20.6629C3.67048 20.517 3.48298 20.3295 3.33706 20.1111C3 19.6067 3 18.9045 3 17.5Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3H15C17.8284 3 19.2426 3 20.1213 3.87868C21 4.75736 21 6.17157 21 9V15C21 17.8284 21 19.2426 20.1213 20.1213C19.2426 21 17.8284 21 15 21H9C6.17157 21 4.75736 21 3.87868 20.1213C3 19.2426 3 17.8284 3 15V9Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M13.389 9L10 12.389L13.389 15.7781" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3H15C17.8284 3 19.2426 3 20.1213 3.87868C21 4.75736 21 6.17157 21 9V15C21 17.8284 21 19.2426 20.1213 20.1213C19.2426 21 17.8284 21 15 21H9C6.17157 21 4.75736 21 3.87868 20.1213C3 19.2426 3 17.8284 3 15V9Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M15.389 13.389L12 10L8.61096 13.389" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3H15C17.8284 3 19.2426 3 20.1213 3.87868C21 4.75736 21 6.17157 21 9V15C21 17.8284 21 19.2426 20.1213 20.1213C19.2426 21 17.8284 21 15 21H9C6.17157 21 4.75736 21 3.87868 20.1213C3 19.2426 3 17.8284 3 15V9Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M10.611 15.3889L14 11.9999L10.611 8.61084" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3H15C17.8284 3 19.2426 3 20.1213 3.87868C21 4.75736 21 6.17157 21 9V15C21 17.8284 21 19.2426 20.1213 20.1213C19.2426 21 17.8284 21 15 21H9C6.17157 21 4.75736 21 3.87868 20.1213C3 19.2426 3 17.8284 3 15V9Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M8.61096 10.6108L12 13.9999L15.389 10.6108" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M9.06147 18.1227L3.00012 12.0613L9.06147 6" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M21 12.0615H3" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M5.93866 9.12287L12 3.06152L18.0613 9.12287" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M12 21.0615L12 3.06152" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M14.9385 6L20.9999 12.0613L14.9385 18.1227" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M3 12.061L21 12.061" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M18.0613 15L12 21.0613L5.93866 15" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M12 3.06152L12 21.0615" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M15.0001 17.9996L8.99988 11.9994L15.0037 5.99561" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M5.99622 14.9963L11.9965 8.99609L18.0002 14.9999" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M9.00378 5.99561L15.004 11.9959L9.00024 17.9996" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M18.0004 8.99963L12.0001 14.9999L5.99634 8.99609" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M18.0004 2.00403L12.0001 8.00427L5.99634 2.00049" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M18.0004 9.00354L12.0001 15.0038L5.99634 9" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M18.0004 16.0035L12.0001 22.0038L5.99634 16" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M5.99634 22.0004L11.9966 16.0001L18.0004 22.0039" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M5.99634 15.0009L11.9966 9.00061L18.0004 15.0044" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M5.99634 8.00085L11.9966 2.00061L18.0004 8.00439" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M2.00018 6.00037L8.00043 12.0006L1.99664 18.0044" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M8.9997 6.00037L14.9999 12.0006L8.99615 18.0044" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M15.9997 6.00037L21.9999 12.0006L15.9962 18.0044" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M21.9964 18.0045L15.9962 12.0043L21.9999 6.00049" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M14.9969 18.0045L8.99664 12.0043L15.0004 6.00049" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M7.99689 18.0045L1.99664 12.0043L8.00043 6.00049" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M6 9.00025L12.0002 3L18.004 9.00378M18.004 15.0037L12.0038 21.0039L6 15.0001"
stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M20.5108 3.504V7.50399M20.5108 7.50399L19.1536 5.94511C16.9593 3.53663 13.5293 2.40745 10.165 3.3089C5.36385 4.59538 2.51461 9.53041 3.80109 14.3316C5.08757 19.1328 10.0226 21.982 14.8238 20.6956C16.555 20.2317 18.0324 19.2935 19.1536 18.0582M20.5108 7.50399H16.5108"
stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.49219 3.504L3.49219 7.50399M3.49219 7.50399H7.49219M3.49219 7.50399L4.17076 6.72455L4.84934 5.94511C7.0437 3.53663 10.4737 2.40745 13.8379 3.3089C18.6391 4.59538 21.4884 9.53041 20.2019 14.3316C18.9154 19.1328 13.9804 21.982 9.17917 20.6956C7.44799 20.2317 5.97059 19.2935 4.84934 18.0582"
stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M12 21H20" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path
d="M12.7071 8.46492C12.3166 8.85544 11.6834 8.85544 11.2929 8.46492C10.9024 8.07439 10.9024 7.44123 11.2929 7.05071C11.6834 6.66018 12.3166 6.66018 12.7071 7.05071C13.0976 7.44123 13.0976 8.07439 12.7071 8.46492Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M8.46443 12.7071C8.07391 13.0976 7.44074 13.0976 7.05022 12.7071C6.65969 12.3166 6.65969 11.6834 7.05022 11.2929C7.44074 10.9024 8.07391 10.9024 8.46443 11.2929C8.85496 11.6834 8.85496 12.3166 8.46443 12.7071Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M16.9498 12.7071C16.5593 13.0976 15.9261 13.0976 15.5356 12.7071C15.145 12.3166 15.145 11.6834 15.5356 11.2929C15.9261 10.9024 16.5593 10.9024 16.9498 11.2929C17.3403 11.6834 17.3403 12.3166 16.9498 12.7071Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M12.7071 16.9503C12.3166 17.3408 11.6834 17.3408 11.2929 16.9503C10.9024 16.5597 10.9024 15.9266 11.2929 15.5361C11.6834 15.1455 12.3166 15.1455 12.7071 15.5361C13.0976 15.9266 13.0976 16.5597 12.7071 16.9503Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 6.5C3 5.09554 3 4.39331 3.33706 3.88886C3.48298 3.67048 3.67048 3.48298 3.88886 3.33706C4.39331 3 5.09554 3 6.5 3C7.90446 3 8.60669 3 9.11114 3.33706C9.32952 3.48298 9.51702 3.67048 9.66294 3.88886C10 4.39331 10 5.09554 10 6.5V17.5C10 18.9045 10 19.6067 9.66294 20.1111C9.51702 20.3295 9.32952 20.517 9.11114 20.6629C8.60669 21 7.90446 21 6.5 21C5.09554 21 4.39331 21 3.88886 20.6629C3.67048 20.517 3.48298 20.3295 3.33706 20.1111C3 19.6067 3 18.9045 3 17.5V6.5Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M14 6.5C14 5.09554 14 4.39331 14.3371 3.88886C14.483 3.67048 14.6705 3.48298 14.8889 3.33706C15.3933 3 16.0955 3 17.5 3C18.9045 3 19.6067 3 20.1111 3.33706C20.3295 3.48298 20.517 3.67048 20.6629 3.88886C21 4.39331 21 5.09554 21 6.5V17.5C21 18.9045 21 19.6067 20.6629 20.1111C20.517 20.3295 20.3295 20.517 20.1111 20.6629C19.6067 21 18.9045 21 17.5 21C16.0955 21 15.3933 21 14.8889 20.6629C14.6705 20.517 14.483 20.3295 14.3371 20.1111C14 19.6067 14 18.9045 14 17.5V6.5Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 17V6.91921C21 4.64516 21 3.50813 20.2618 2.90786C19.5236 2.30759 18.4104 2.53949 16.1842 3.00329L12.1842 3.83662C10.6591 4.15436 9.89651 4.31322 9.44826 4.86449C9 5.41576 9 6.19469 9 7.75255V19"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M9 10L21 7" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path
d="M9 19C9 20.6569 7.65685 22 6 22C4.34315 22 3 20.6569 3 19C3 17.3431 4.34315 16 6 16C7.65685 16 9 17.3431 9 19Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M21 17C21 18.6569 19.6569 20 18 20C16.3431 20 15 18.6569 15 17C15 15.3431 16.3431 14 18 14C19.6569 14 21 15.3431 21 17Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M22 6H19.2111C17.6392 6 16.8533 6 16.19 6.35498C15.5267 6.70995 15.0907 7.3639 14.2188 8.6718L9.7812 15.3282C8.90927 16.6361 8.4733 17.29 7.81002 17.645C7.14674 18 6.36079 18 4.7889 18H2"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M22 6L20 4" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path
d="M22 18H18.8544C17.6349 18 17.0251 18 16.4866 17.7835C16.2838 17.702 16.0905 17.5986 15.9102 17.475C15.4314 17.147 15.0931 16.6397 14.4167 15.625M2 6H4.99537C6.36296 6 7.04675 6 7.64016 6.27086C7.75517 6.32336 7.86676 6.38307 7.97424 6.44965C8.52877 6.79315 8.90807 7.3621 9.66667 8.5"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M22 18L20 20" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7V11C17 13.7614 14.7614 16 12 16C9.23858 16 7 13.7614 7 11V7Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M20 10V11C20 15.4183 16.4183 19 12 19C7.58172 19 4 15.4183 4 11V10" stroke="black"
stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M12 19V22" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M7 7H10" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M17 7H14" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M7 11H10" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M17 11H14" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 11C3 7.22876 3 5.34315 4.17157 4.17157C5.34315 3 7.22876 3 11 3H13C16.7712 3 18.6569 3 19.8284 4.17157C21 5.34315 21 7.22876 21 11V13C21 16.7712 21 18.6569 19.8284 19.8284C18.6569 21 16.7712 21 13 21H11C7.22876 21 5.34315 21 4.17157 19.8284C3 18.6569 3 16.7712 3 13V11Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M12 16V8" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M15 15V9" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M9 15V9" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M18 14V10" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M6 14V10" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10 10.4996L7.91896 9.06884C5.48539 7.39575 4.2686 6.55921 3.28823 6.93255C3.13803 6.98975 2.99528 7.06484 2.86306 7.15621C2 7.75256 2 9.22917 2 12.1824C2 15.0044 2 16.4155 2.83131 17.0141C2.95911 17.1061 3.09732 17.1827 3.24309 17.2423C4.1913 17.63 5.38785 16.8821 7.78094 15.3865L10 13.9995V10.4996Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M16.0857 8.64347C18.7243 10.2233 20.0435 11.0132 20.0303 12.1619C20.0171 13.3107 18.6801 14.0701 16.0059 15.5888C13.3271 17.1102 11.9877 17.8709 10.9939 17.2923C10 16.7138 10 15.1735 10 12.0929C10 8.93962 10 7.36299 11.0138 6.78837C12.0276 6.21374 13.3803 7.02365 16.0857 8.64347Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M3 3H21" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M3 9H21" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M3 14.5H10" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M3 20H10" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path
d="M17.9611 15.2632C19.31 16.034 19.9844 16.4194 19.9844 16.9997C19.9844 17.58 19.31 17.9654 17.9611 18.7362L16.9923 19.2898C15.6615 20.0503 14.9961 20.4305 14.4981 20.1415C14 19.8524 14 19.0861 14 17.5534L14 16.4461C14 14.9134 14 14.147 14.4981 13.858C14.9961 13.5689 15.6615 13.9492 16.9923 14.7096L17.9611 15.2632Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 6.54919L18.4508 9.09839M21 6.54919L18.4508 4M21 6.54919L7 6.54919C5.11438 6.54919 4.17157 6.54919 3.58579 7.13498C3 7.72077 3 8.66358 3 10.5492L3 11.0002"
stroke="black" stroke-width="1.60274" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
<path
d="M3 17.451L5.54919 14.9019M3 17.451L5.54919 20.0002M3 17.451L17 17.451C18.8856 17.4511 19.8284 17.451 20.4142 16.8653C21 16.2795 21 15.3367 21 13.451V13"
stroke="black" stroke-width="1.60274" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.4202 8.6093C14.3152 10.1941 15.7628 10.9865 15.7496 12.1865C15.7365 13.3865 14.2719 14.147 11.3428 15.6679L8.84332 16.9658C6.22987 18.3229 4.92314 19.0014 3.96157 18.4172C3 17.833 3 16.3606 3 13.4159L3 10.7497C3 7.74009 3 6.23527 3.98037 5.65429C4.96074 5.07331 6.28073 5.79589 8.9207 7.24105L11.4202 8.6093Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M20 6V18" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 4C4.58803 5.66502 3 8.50052 3 11.7185C3 16.8445 7.02944 21 12 21C16.9706 21 21 16.8445 21 11.7185C21 8.50052 19.412 5.66502 17 4"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M12 3L12 10" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14.031 6.80725C18.0186 9.11585 20.0124 10.2702 20.0124 11.9998C20.0124 13.7295 18.0186 14.8838 14.031 17.1924L13.0062 17.7857C9.00415 20.1027 7.00311 21.2612 5.50155 20.3954C4 19.5297 4 17.2175 4 12.5931L4 11.4065C4 6.7821 4 4.46991 5.50156 3.60418C7.00311 2.73846 9.00415 3.89695 13.0062 6.21394L14.031 6.80725Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14 13.5003L16.081 14.931C18.5146 16.6041 19.7314 17.4406 20.7118 17.0673C20.862 17.0101 21.0047 16.935 21.1369 16.8436C22 16.2473 22 14.7707 22 11.8174C22 8.9954 22 7.58437 21.1687 6.98577C21.0409 6.89375 20.9027 6.81714 20.7569 6.75754C19.8087 6.36985 18.6121 7.1177 16.2191 8.61337L14 10.0003L14 13.5003Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M7.91423 15.3568C5.27566 13.777 3.95638 12.9871 3.96958 11.8383C3.98278 10.6895 5.31987 9.93015 7.99403 8.4114C10.6728 6.89004 12.0122 6.12936 13.0061 6.70787C13.9999 7.28639 13.9999 8.82671 13.9999 11.9074C13.9999 15.0606 13.9999 16.6372 12.9861 17.2119C11.9723 17.7865 10.6196 16.9766 7.91423 15.3568Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.58 8.6093C8.68495 10.1941 7.23742 10.9865 7.25058 12.1865C7.26373 13.3865 8.72828 14.147 11.6574 15.6679L14.1569 16.9658C16.7703 18.3229 18.0771 19.0014 19.0386 18.4172C20.0002 17.833 20.0002 16.3606 20.0002 13.4159V10.7497C20.0002 7.74009 20.0002 6.23527 19.0198 5.65429C18.0395 5.07331 16.7195 5.79589 14.0795 7.24105L11.58 8.6093Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M3 6V18" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 12.5C3 11.1193 4.11929 10 5.5 10C6.88071 10 8 11.1193 8 12.5V13.5C8 14.8807 6.88071 16 5.5 16C4.11929 16 3 14.8807 3 13.5V12.5Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M21 13.5C21 14.8807 19.8807 16 18.5 16C17.1193 16 16 14.8807 16 13.5L16 12.5C16 11.1193 17.1193 10 18.5 10C19.8807 10 21 11.1193 21 12.5V13.5Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M12 19C12 19 12 19 12 19ZM12 19C12.5523 19 13 19.4477 13 20M12 19C11.4477 19 11 19.4477 11 20M13 20C13 20 13 20 13 20ZM13 20C13 20.5523 12.5523 21 12 21M11 20C11 20 11 20 11 20ZM11 20C11 20.5523 11.4477 21 12 21M12 21C12 21 12 21 12 21Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M18 10V9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9V10" stroke="black"
stroke-width="1.6" class="my-path"></path>
<path d="M13 20L14 20C16.2091 20 18 18.2091 18 16" stroke="black" stroke-width="1.6"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2 10C2 7.17157 2 5.75736 2.87868 4.87868C3.75736 4 5.17157 4 8 4H11C13.8284 4 15.2426 4 16.1213 4.87868C17 5.75736 17 7.17157 17 10V14C17 16.8284 17 18.2426 16.1213 19.1213C15.2426 20 13.8284 20 11 20H8C5.17157 20 3.75736 20 2.87868 19.1213C2 18.2426 2 16.8284 2 14V10Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M18.8531 8.20273L17 9.49989V15.4999L18.8531 16.797C20.2334 17.7633 20.9236 18.2464 21.4618 17.9662C22 17.686 22 16.8435 22 15.1586V9.8412C22 8.15625 22 7.31377 21.4618 7.03356C20.9236 6.75335 20.2334 7.23648 18.8531 8.20273Z"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path
d="M13 9.5C13 10.3284 12.3284 11 11.5 11C10.6716 11 10 10.3284 10 9.5C10 8.67157 10.6716 8 11.5 8C12.3284 8 13 8.67157 13 9.5Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M15 14C15 15.6569 13.6569 17 12 17C10.3431 17 9 15.6569 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M21 17V8.97116C21 7.25797 19.7021 5.82337 17.9975 5.65238L17.2448 5.57687C16.4789 5.50005 15.8182 5.00632 15.5276 4.29363C15.2085 3.51135 14.4478 3 13.6029 3H10.3971C9.55224 3 8.79146 3.51135 8.47242 4.29363C8.18177 5.00632 7.52107 5.50005 6.75523 5.57687L6.00253 5.65238C4.29789 5.82337 3 7.25796 3 8.97116V17C3 19.2091 4.79086 21 7 21H17C19.2091 21 21 19.2091 21 17Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M18 9H17" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.58487 19L7.07189 15.2455C7.69252 14.4869 8.00284 14.1076 8.40938 14.0633C8.47386 14.0563 8.53887 14.0555 8.60349 14.0611C9.01094 14.0961 9.32986 14.4682 9.9677 15.2123C10.6306 15.9857 10.962 16.3723 11.381 16.4005C11.4473 16.4049 11.5139 16.4027 11.5797 16.394C11.996 16.3387 12.3016 15.9312 12.9127 15.1164L14.3606 13.1858C15.11 12.1867 15.4847 11.6871 15.9919 11.693C16.4992 11.6989 16.8622 12.207 17.5881 13.2233L21 18M21 18V11C21 7.22876 21 5.34315 19.8284 4.17157C18.6569 3 16.7712 3 13 3H11C7.22876 3 5.34315 3 4.17157 4.17157C3 5.34315 3 7.22876 3 11V13C3 16.7712 3 18.6569 4.17157 19.8284C5.34315 21 7.22876 21 11 21H18C19.6569 21 21 19.6569 21 18Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M12 9C12 10.1046 11.1046 11 10 11C8.89543 11 8 10.1046 8 9C8 7.89543 8.89543 7 10 7C11.1046 7 12 7.89543 12 9Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.6663 12.6667C13.6663 13.5871 12.9201 14.3333 11.9997 14.3333C11.0792 14.3333 10.333 13.5871 10.333 12.6667C10.333 11.7462 11.0792 11 11.9997 11C12.9201 11 13.6663 11.7462 13.6663 12.6667Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M17 13V10.3173C17 9.36554 16.2789 8.56854 15.3319 8.47354L14.9138 8.4316C14.4883 8.38892 14.1212 8.11462 13.9598 7.71868C13.7825 7.28408 13.3599 7 12.8905 7H11.1095C10.6401 7 10.2175 7.28408 10.0402 7.71868C9.87876 8.11462 9.51171 8.38892 9.08624 8.4316L8.66807 8.47354C7.72105 8.56854 7 9.36554 7 10.3173V13C7 14.8856 7 15.8284 7.58579 16.4142C8.17157 17 9.11438 17 11 17H13C14.8856 17 15.8284 17 16.4142 16.4142C17 15.8284 17 14.8856 17 13Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M8 3H7C5.11438 3 4.17157 3 3.58579 3.58579C3 4.17157 3 5.11438 3 7V8" stroke="black"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M16 3H17C18.8856 3 19.8284 3 20.4142 3.58579C21 4.17157 21 5.11438 21 7V8"
stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
<path d="M3 16V17C3 18.8856 3 19.8284 3.58579 20.4142C4.17157 21 5.11438 21 7 21H8"
stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
<path d="M21 16V17C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H16"
stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M11.9998 14C9.15153 14 6.65091 15.3024 5.23341 17.2638C4.48341 18.3016 4.10841 18.8204 4.6654 19.9102C5.2224 21 6.1482 21 7.99981 21H15.9998C17.8514 21 18.7772 21 19.3342 19.9102C19.8912 18.8204 19.5162 18.3016 18.7662 17.2638C17.3487 15.3024 14.8481 14 11.9998 14Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.02427 10.2591L13.7368 17.9716C15.4072 19.642 18.1154 19.642 19.7858 17.9716C20.4539 17.3035 20.4539 16.2202 19.7858 15.552L17.6434 13.4096C17.1562 12.9224 16.3663 12.9224 15.8791 13.4096C15.3919 13.8968 14.602 13.8968 14.1148 13.4096L10.2334 9.52819C9.74619 9.041 9.74619 8.25109 10.2334 7.7639C10.7206 7.2767 10.7206 6.4868 10.2334 5.9996L8.44388 4.2101C7.77573 3.54195 6.69243 3.54194 6.02428 4.2101C4.35389 5.88049 4.35389 8.58872 6.02427 10.2591Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.02427 10.2586L13.7368 17.9711C15.4072 19.6415 18.1154 19.6415 19.7858 17.9711C20.4539 17.303 20.4539 16.2197 19.7858 15.5515L17.6434 13.4092C17.1562 12.922 16.3663 12.922 15.8791 13.4092C15.3919 13.8964 14.602 13.8964 14.1148 13.4092L10.2334 9.5277C9.74619 9.04051 9.74619 8.2506 10.2334 7.76341C10.7206 7.27621 10.7206 6.48631 10.2334 5.99911L8.44388 4.20961C7.77573 3.54146 6.69243 3.54146 6.02428 4.20961C4.35389 5.88 4.35389 8.58823 6.02427 10.2586Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M15 6.40039C15.7763 6.48844 17.2511 6.96983 17.56 8.81919" stroke="black"
stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M14 9.1709C14.291 9.2039 14.8438 9.38435 14.9596 10.0776" stroke="black"
stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M16.1719 3.72559C17.37 3.82211 19.8619 4.73001 20.2443 7.58938" stroke="black"
stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.02427 10.2586L13.7368 17.9711C15.4072 19.6415 18.1154 19.6415 19.7858 17.9711C20.4539 17.303 20.4539 16.2197 19.7858 15.5515L17.6434 13.4092C17.1562 12.922 16.3663 12.922 15.8791 13.4092C15.3919 13.8964 14.602 13.8964 14.1148 13.4092L10.2334 9.5277C9.74619 9.04051 9.74619 8.2506 10.2334 7.76341C10.7206 7.27621 10.7206 6.48631 10.2334 5.99911L8.44388 4.20961C7.77573 3.54146 6.69243 3.54146 6.02428 4.20961C4.35389 5.88 4.35389 8.58823 6.02427 10.2586Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M18 4L18 8" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M20 6H16" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.02427 10.2586L13.7368 17.9711C15.4072 19.6415 18.1154 19.6415 19.7858 17.9711C20.4539 17.303 20.4539 16.2197 19.7858 15.5515L17.6434 13.4092C17.1562 12.922 16.3663 12.922 15.8791 13.4092C15.3919 13.8964 14.602 13.8964 14.1148 13.4092L10.2334 9.5277C9.74619 9.04051 9.74619 8.2506 10.2334 7.76341C10.7206 7.27621 10.7206 6.48631 10.2334 5.99911L8.44388 4.20961C7.77573 3.54146 6.69243 3.54146 6.02428 4.20961C4.35389 5.88 4.35389 8.58823 6.02427 10.2586Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M16.5859 4.58545L19.4144 7.41388" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
<path d="M19.4144 4.58545L16.5859 7.41388" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.02427 10.2586L13.7368 17.9711C15.4072 19.6415 18.1154 19.6415 19.7858 17.9711C20.4539 17.303 20.4539 16.2197 19.7858 15.5515L17.6434 13.4092C17.1562 12.922 16.3663 12.922 15.8791 13.4092C15.3919 13.8964 14.602 13.8964 14.1148 13.4092L10.2334 9.5277C9.74619 9.04051 9.74619 8.2506 10.2334 7.76341C10.7206 7.27621 10.7206 6.48631 10.2334 5.99911L8.44388 4.20961C7.77573 3.54146 6.69243 3.54146 6.02428 4.20961C4.35389 5.88 4.35389 8.58823 6.02427 10.2586Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M20 6H16" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.02427 10.2586L13.7368 17.9711C15.4072 19.6415 18.1154 19.6415 19.7858 17.9711C20.4539 17.303 20.4539 16.2197 19.7858 15.5515L17.6434 13.4092C17.1562 12.922 16.3663 12.922 15.8791 13.4092C15.3919 13.8964 14.602 13.8964 14.1148 13.4092L10.2334 9.5277C9.74619 9.04051 9.74619 8.2506 10.2334 7.76341C10.7206 7.27621 10.7206 6.48631 10.2334 5.99911L8.44388 4.20961C7.77573 3.54146 6.69243 3.54146 6.02428 4.20961C4.35389 5.88 4.35389 8.58823 6.02427 10.2586Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M18.79 8L18.79 5H15.79" stroke="black" stroke-width="1.6" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.02457 10.2588L13.7371 17.9713C15.4075 19.6417 18.1157 19.6417 19.7861 17.9713C20.4542 17.3032 20.4542 16.2199 19.7861 15.5517L17.6437 13.4093C17.1565 12.9221 16.3666 12.9221 15.8794 13.4093C15.3922 13.8965 14.6023 13.8965 14.1151 13.4093L12.1744 11.4686L10.2337 9.52789C9.74648 9.0407 9.74648 8.25079 10.2337 7.7636C10.7209 7.2764 10.7209 6.4865 10.2337 5.9993L8.44418 4.2098C7.77602 3.54165 6.69273 3.54165 6.02457 4.2098C4.35418 5.88019 4.35418 8.58842 6.02457 10.2588Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M16.5 4L16.5 7L19.5 7" stroke="black" stroke-width="1.6" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 13.6893 3.4654 15.2698 4.27497 16.6205C4.48399 16.9692 4.5885 17.1435 4.62422 17.2941C4.63426 17.3364 4.63937 17.3653 4.64443 17.4085C4.66244 17.5622 4.62975 17.7318 4.56438 18.0711C4.33499 19.2615 4.2203 19.8567 4.50189 20.2155C4.56874 20.3007 4.64899 20.3744 4.73948 20.4339C5.12068 20.6843 5.70412 20.52 6.87102 20.1912L7.01153 20.1517C7.35175 20.0558 7.52186 20.0079 7.68109 20.0145C7.69872 20.0152 7.71035 20.016 7.72793 20.0176C7.88666 20.0316 8.07813 20.1136 8.46103 20.2775C9.5473 20.7425 10.7436 21 12 21Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M7.04962 12L7 12.005" stroke="black" stroke-width="2.5" stroke-linecap="round"
class="my-path"></path>
<path d="M11.9998 12.0049L11.9502 12.0098" stroke="black" stroke-width="2.5"
stroke-linecap="round" class="my-path"></path>
<path d="M16.9998 12.0049L16.9502 12.0098" stroke="black" stroke-width="2.5"
stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 12C3 8.22876 3 6.34315 4.17157 5.17157C5.34315 4 7.22876 4 11 4H13C16.7712 4 18.6569 4 19.8284 5.17157C21 6.34315 21 8.22876 21 12C21 15.7712 21 17.6569 19.8284 18.8284C18.6569 20 16.7712 20 13 20H11C7.22876 20 5.34315 20 4.17157 18.8284C3 17.6569 3 15.7712 3 12Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M3.54883 6.73307L7.76733 9.36198C9.82587 10.6448 10.8551 11.2863 11.9998 11.2861C13.1445 11.2859 14.1736 10.6441 16.2317 9.36063L20.461 6.72314"
stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 8H4H5M3 12H5M5 12V17C5 18.8856 5 19.8284 5.58579 20.4142C6.17157 21 7.11438 21 9 21H15C16.8856 21 17.8284 21 18.4142 20.4142C19 19.8284 19 18.8856 19 17V7C19 5.11438 19 4.17157 18.4142 3.58579C17.8284 3 16.8856 3 15 3H9C7.11438 3 6.17157 3 5.58579 3.58579C5 4.17157 5 5.11438 5 7V12ZM3 16H5M15 16V15.4799C15 14.5331 14.2325 13.7656 13.2857 13.7656H10.7143C9.76751 13.7656 9 14.5331 9 15.4799V16M21 8V10M21 14V16M13.5 9.5C13.5 10.3284 12.8284 11 12 11C11.1716 11 10.5 10.3284 10.5 9.5C10.5 8.67157 11.1716 8 12 8C12.8284 8 13.5 8.67157 13.5 9.5Z"
stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.81207 6.05324C9.53921 2.87158 14.4614 2.87158 17.1885 6.05324C19.382 8.61225 19.382 12.3884 17.1885 14.9474L13.0785 19.7424C12.7864 20.0831 12.6404 20.2535 12.4797 20.3413C12.1809 20.5045 11.8197 20.5045 11.5209 20.3413C11.3602 20.2535 11.2142 20.0831 10.9221 19.7424L6.81207 14.9474C4.61863 12.3884 4.61863 8.61225 6.81207 6.05324Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 12C21 16.9706 16.9706 21 12 21M21 12C21 7.02944 16.9706 3 12 3M21 12H17M12 21C7.02944 21 3 16.9706 3 12M12 21V17M3 12C3 7.02944 7.02944 3 12 3M3 12H7M12 3V7"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path
d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M10.5927 10.3258L13.7265 13.4595M9.44071 11.6929L9.24875 12.2618C8.69082 13.9156 8.41186 14.7425 8.84729 15.1811C9.28272 15.6197 10.1116 15.3467 11.7694 14.8008L12.3397 14.613C13.2719 14.306 13.738 14.1525 14.0731 13.8199C14.4081 13.4873 14.565 13.0223 14.8787 12.0924L15.0707 11.5234C15.6286 9.8696 15.9076 9.04271 15.4721 8.60411C15.0367 8.16551 14.2078 8.43847 12.55 8.9844L11.9797 9.17223C11.0475 9.4792 10.5814 9.63269 10.2464 9.96533C9.9113 10.298 9.75443 10.7629 9.44071 11.6929Z"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M10.2847 8.85851C11.0506 7.58207 11.4335 6.94385 11.9997 6.94385C12.5659 6.94385 12.9488 7.58207 13.7147 8.85851L15.3889 11.6489C16.3542 13.2576 16.8368 14.062 16.5984 14.5499C16.5298 14.6902 16.4293 14.8125 16.305 14.907C15.8726 15.2356 14.9899 14.9182 13.2244 14.2836C12.6824 14.0888 12.4115 13.9914 12.1307 13.9729C12.0435 13.9672 11.956 13.9672 11.8688 13.9729C11.588 13.9914 11.317 14.0888 10.775 14.2836C9.00954 14.9182 8.12679 15.2356 7.69444 14.907C7.57011 14.8125 7.46964 14.6902 7.40107 14.5499C7.16265 14.062 7.64527 13.2576 8.61052 11.6489L10.2847 8.85851Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 7.88304C3 6.49159 3 5.79587 3.37752 5.2721C3.75503 4.74832 4.41505 4.52832 5.73509 4.0883L9 3V19L8.26491 19.245C5.86241 20.0459 4.66116 20.4463 3.83058 19.8476C3 19.249 3 17.9828 3 15.4503V7.88304Z"
stroke="black" stroke-width="1.6" stroke-linejoin="round" class="my-path"></path>
<path d="M9 3L15 5V21L9 19V3Z" stroke="black" stroke-width="1.6" stroke-linejoin="round"
class="my-path"></path>
<path
d="M15 5.00018L15.7351 4.75515C18.1376 3.95431 19.3388 3.5539 20.1694 4.15255C21 4.75119 21 6.01742 21 8.54988V16.1171C21 17.5086 21 18.2043 20.6225 18.7281C20.245 19.2519 19.5849 19.4719 18.2649 19.9119L15 21.0002V5.00018Z"
stroke="black" stroke-width="1.6" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.1833 21.0002H10.8167C7.22347 21.0002 5.42688 21.0002 4.27521 19.9286C4.20492 19.8632 4.13701 19.7953 4.0716 19.725C3 18.5733 3 16.7767 3 13.1836C3 11.1849 3 10.1856 3.43169 9.33343C3.45883 9.27984 3.48718 9.22688 3.5167 9.17457C3.98633 8.34266 4.81781 7.78834 6.48076 6.67971L7.5624 5.95862C9.7134 4.52462 10.7889 3.80762 12 3.80762C13.2111 3.80762 14.2866 4.52462 16.4376 5.95862L17.5192 6.67971C19.1822 7.78834 20.0137 8.34266 20.4833 9.17457C20.5128 9.22688 20.5412 9.27984 20.5683 9.33343C21 10.1856 21 11.1849 21 13.1836C21 16.7767 21 18.5733 19.9284 19.725C19.863 19.7953 19.7951 19.8632 19.7248 19.9286C18.5731 21.0002 16.7765 21.0002 13.1833 21.0002Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M9 18C9 17.0681 9 16.6022 9.15224 16.2346C9.35523 15.7446 9.74458 15.3552 10.2346 15.1522C10.6022 15 11.0681 15 12 15C12.9319 15 13.3978 15 13.7654 15.1522C14.2554 15.3552 14.6448 15.7446 14.8478 16.2346C15 16.6022 15 17.0681 15 18V21H9V18Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M12 8L12 12" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path d="M14 10H10" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3C11.8284 3 13.2426 3 14.1213 3.87868C15 4.75736 15 6.17157 15 9V21H7C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V9Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M7 17C7 15.8954 7.89543 15 9 15C10.1046 15 11 15.8954 11 17V21H7V17Z" stroke="black"
stroke-width="1.6" class="my-path"></path>
<path d="M7 6L7 7" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M11 6L11 7" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M7 10L7 11" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M11 10L11 11" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path
d="M15 9H17C18.8856 9 19.8284 9 20.4142 9.58579C21 10.1716 21 11.1144 21 13V17C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H15V9Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M8 7C8 5.11438 8 4.17157 8.58579 3.58579C9.17157 3 10.1144 3 12 3C13.8856 3 14.8284 3 15.4142 3.58579C16 4.17157 16 5.11438 16 7V17C16 18.8856 16 19.8284 15.4142 20.4142C14.8284 21 13.8856 21 12 21C10.1144 21 9.17157 21 8.58579 20.4142C8 19.8284 8 18.8856 8 17V7Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M8 20H7C5.11438 20 4.17157 20 3.58579 19.4142C3 18.8284 3 17.8856 3 16V10.2648C3 9.15858 3 8.60549 3.2596 8.14698C3.5192 7.68848 3.99347 7.40392 4.94202 6.83479L8 5"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M15.9999 5L19.0579 6.83479C20.0065 7.40392 20.4807 7.68848 20.7403 8.14698C20.9999 8.60549 20.9999 9.15858 20.9999 10.2648V16C20.9999 17.8856 20.9999 18.8284 20.4142 19.4142C19.8284 20 18.8856 20 16.9999 20H15.8496"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M5.5 17L5.5 15" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path d="M18.5 17L18.5 15" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path d="M5.5 12L5.5 10" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path d="M18.5 12L18.5 10" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path d="M12 20L12 17.5" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path d="M12 9V9.05" stroke="black" stroke-width="2.5" stroke-linecap="round" class="my-path">
</path>
<path d="M12 13V13.05" stroke="black" stroke-width="2.5" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M17 5C17 3.89543 17.8954 3 19 3C20.1046 3 21 3.89543 21 5V21H17V5Z" stroke="black"
stroke-width="1.6" class="my-path"></path>
<path d="M10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9V21H10V9Z" stroke="black"
stroke-width="1.6" class="my-path"></path>
<path d="M3 12C3 10.8954 3.89543 10 5 10C6.10457 10 7 10.8954 7 12V21H3V12Z" stroke="black"
stroke-width="1.6" class="my-path"></path>
<path d="M3 20.9883L21 20.9995" stroke="black" stroke-width="1.6" stroke-linecap="square"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 17C3 16.4477 3.44772 16 4 16H6C6.55228 16 7 16.4477 7 17V20C7 20.5523 6.55228 21 6 21H4C3.44772 21 3 20.5523 3 20V17Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M10 14C10 13.4477 10.4477 13 11 13H13C13.5523 13 14 13.4477 14 14V20C14 20.5523 13.5523 21 13 21H11C10.4477 21 10 20.5523 10 20V14Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M17 10C17 9.44772 17.4477 9 18 9H20C20.5523 9 21 9.44772 21 10V20C21 20.5523 20.5523 21 20 21H18C17.4477 21 17 20.5523 17 20V10Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M18 3V6.1427M18 3H14.6523M18 3L10.0259 10.0881C9.7251 10.3555 9.57468 10.4892 9.41321 10.5541C9.15504 10.6578 8.86532 10.6493 8.61369 10.5306C8.45631 10.4563 8.314 10.314 8.02939 10.0294C7.72925 9.72925 7.57918 9.57918 7.41454 9.50418C7.1512 9.38422 6.8488 9.38422 6.58546 9.50418C6.42082 9.57918 6.27075 9.72925 5.97061 10.0294L4 12"
stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.9993 9.45056C19.9731 9.45056 20.46 9.45056 20.7596 9.04C21.0592 8.62944 20.9367 8.24711 20.6917 7.48244C20.6375 7.31347 20.5764 7.14654 20.5083 6.98208C20.1841 6.19948 19.709 5.48839 19.11 4.88941C18.511 4.29043 17.7999 3.81529 17.0173 3.49113C16.8529 3.42301 16.6859 3.36184 16.5169 3.3077C15.7523 3.06271 15.3699 2.94021 14.9594 3.23979C14.5488 3.53936 14.5488 4.02628 14.5488 5.00012L14.5488 7.45056C14.5488 8.39337 14.5488 8.86477 14.8417 9.15767C15.1346 9.45056 15.606 9.45056 16.5488 9.45056H18.9993Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M20.9995 11.9998C20.9995 16.9702 16.9702 20.9995 11.9998 20.9995C7.02933 20.9995 3 16.9702 3 11.9998C3 7.02933 7.02933 3 11.9998 3"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M7 14V21M7 3V6" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path d="M17 10V3M17 21V18" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path
d="M4 9C4 8.06812 4 7.60218 4.15224 7.23463C4.35523 6.74458 4.74458 6.35523 5.23463 6.15224C5.60218 6 6.06812 6 7 6C7.93188 6 8.39782 6 8.76537 6.15224C9.25542 6.35523 9.64477 6.74458 9.84776 7.23463C10 7.60218 10 8.06812 10 9V11C10 11.9319 10 12.3978 9.84776 12.7654C9.64477 13.2554 9.25542 13.6448 8.76537 13.8478C8.39782 14 7.93188 14 7 14C6.06812 14 5.60218 14 5.23463 13.8478C4.74458 13.6448 4.35523 13.2554 4.15224 12.7654C4 12.3978 4 11.9319 4 11V9Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M20 15C20 15.9319 20 16.3978 19.8478 16.7654C19.6448 17.2554 19.2554 17.6448 18.7654 17.8478C18.3978 18 17.9319 18 17 18C16.0681 18 15.6022 18 15.2346 17.8478C14.7446 17.6448 14.3552 17.2554 14.1522 16.7654C14 16.3978 14 15.9319 14 15L14 13C14 12.0681 14 11.6022 14.1522 11.2346C14.3552 10.7446 14.7446 10.3552 15.2346 10.1522C15.6022 10 16.0681 10 17 10C17.9319 10 18.3978 10 18.7654 10.1522C19.2554 10.3552 19.6448 10.7446 19.8478 11.2346C20 11.6022 20 12.0681 20 13V15Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14 14H19C20.1046 14 21 13.1046 21 12V8C21 6.89543 20.1046 6 19 6H5C3.89543 6 3 6.89543 3 8V12C3 13.1046 3.89543 14 5 14H10"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M20 17V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V17" stroke="black"
stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path
d="M10 13C10 12.4477 10.4477 12 11 12H13C13.5523 12 14 12.4477 14 13V15C14 15.5523 13.5523 16 13 16H11C10.4477 16 10 15.5523 10 15V13Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M15 5.23828V3.9998C15 3.44752 14.5523 3 14 3H10C9.44772 3 9 3.44752 9 3.9998V5.23828"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M8 6H7C5.11438 6 4.17157 6 3.58579 6.58579C3 7.17157 3 8.11438 3 10V17C3 18.8856 3 19.8284 3.58579 20.4142C4.17157 21 5.11438 21 7 21H17C18.8856 21 19.8284 21 20.4142 20.4142C21 19.8284 21 18.8856 21 17V10C21 8.11438 21 7.17157 20.4142 6.58579C19.8284 6 18.8856 6 17 6H16"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path
d="M10.5 12.5C10.5 13.3284 9.82843 14 9 14C8.17157 14 7.5 13.3284 7.5 12.5C7.5 11.6716 8.17157 11 9 11C9.82843 11 10.5 11.6716 10.5 12.5Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M12 18V17.9286C12 17.5302 12 17.331 11.9624 17.1662C11.8342 16.6045 11.3955 16.1658 10.8338 16.0376C10.669 16 10.4698 16 10.0714 16H8C7.53501 16 7.30252 16 7.11177 16.0511C6.59413 16.1898 6.18981 16.5941 6.05111 17.1118C6 17.3025 6 17.535 6 18"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M15 13H18" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M15 16H18" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path
d="M10.25 6.24985L10.25 5.47472C10.25 5.16873 10.25 5.01573 10.2931 4.87378C10.3121 4.8111 10.3372 4.75043 10.3681 4.69267C10.438 4.56185 10.5462 4.45366 10.7626 4.23729C11.2591 3.74073 11.5074 3.49246 11.8049 3.43328C11.9337 3.40766 12.0663 3.40766 12.1951 3.43328C12.4926 3.49246 12.7409 3.74073 13.2374 4.23729C13.4538 4.45366 13.562 4.56185 13.6319 4.69267C13.6628 4.75043 13.6879 4.8111 13.7069 4.87378C13.75 5.01573 13.75 5.16873 13.75 5.47472V6.24985C13.75 6.95208 13.75 7.3032 13.5815 7.55542C13.5085 7.66461 13.4148 7.75836 13.3056 7.83132C13.0533 7.99985 12.7022 7.99985 12 7.99985C11.2978 7.99985 10.9467 7.99985 10.6944 7.83132C10.5852 7.75836 10.4915 7.66461 10.4185 7.55542C10.25 7.3032 10.25 6.95208 10.25 6.24985Z"
stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10 4C10 3.44772 10.4477 3 11 3H13C13.5523 3 14 3.44772 14 4V6C14 6.55228 13.5523 7 13 7H11C10.4477 7 10 6.55228 10 6V4Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M4 16V15C4 13.8954 4.89543 13 6 13H18C19.1046 13 20 13.8954 20 15V16" stroke="black"
stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M12 10V16" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path
d="M5 20C5 20.5523 4.55228 21 4 21C3.44772 21 3 20.5523 3 20C3 19.4477 3.44772 19 4 19C4.55228 19 5 19.4477 5 20Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M13 20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20C11 19.4477 11.4477 19 12 19C12.5523 19 13 19.4477 13 20Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M21 20C21 20.5523 20.5523 21 20 21C19.4477 21 19 20.5523 19 20C19 19.4477 19.4477 19 20 19C20.5523 19 21 19.4477 21 20Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 6V17C3 18.8856 3 19.8284 3.58579 20.4142C4.17157 21 5.11438 21 7 21H17C18.8856 21 19.8284 21 20.4142 20.4142C21 19.8284 21 18.8856 21 17V12C21 10.1144 21 9.17157 20.4142 8.58579C19.8284 8 18.8856 8 17 8H7.82843C6.67474 8 6.0979 8 5.56035 7.84678C5.26506 7.7626 4.98044 7.64471 4.71212 7.49543C4.22367 7.22367 3.81578 6.81578 3 6ZM3 6C3 5.06812 3 4.60218 3.15224 4.23463C3.35523 3.74458 3.74458 3.35523 4.23463 3.15224C4.60218 3 5.06812 3 6 3H14C15.1046 3 16 3.89543 16 5"
stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
<path
d="M18 14.5C18 15.3284 17.3284 16 16.5 16C15.6716 16 15 15.3284 15 14.5C15 13.6716 15.6716 13 16.5 13C17.3284 13 18 13.6716 18 14.5Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M3 20.5269L21 20.5269" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path d="M4 10.5269H9V20.5269H4V10.5269Z" stroke="black" stroke-width="1.6" class="my-path">
</path>
<path d="M15 10.5269H20V20.5269H15V10.5269Z" stroke="black" stroke-width="1.6"
class="my-path"></path>
<path
d="M9.64731 4.23805C10.7822 3.41268 11.3496 3 12 3C12.6504 3 13.2178 3.41268 14.3527 4.23805L18.026 6.90953C20.0756 8.40017 21.1004 9.14549 20.8758 9.83625C20.6512 10.527 19.384 10.527 16.8496 10.527H7.15037C4.61601 10.527 3.34882 10.527 3.1242 9.83625C2.89958 9.14549 3.92439 8.40017 5.97403 6.90953L9.64731 4.23805Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M12 7.4502V7.5002" stroke="black" stroke-width="2.5" stroke-linecap="round"
class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M20 6C20 7.65685 16.4183 9 12 9C7.58172 9 4 7.65685 4 6C4 4.34315 7.58172 3 12 3C16.4183 3 20 4.34315 20 6Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M20 10C20 11.6569 16.4183 13 12 13C7.58172 13 4 11.6569 4 10" stroke="black"
stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M20 14C20 15.6569 16.4183 17 12 17C7.58172 17 4 15.6569 4 14" stroke="black"
stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M20 18C20 19.6569 16.4183 21 12 21C7.58172 21 4 19.6569 4 18" stroke="black"
stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12.8968 3H11.1033C9.15181 3 8.17604 3 7.6433 3.39856C7.15631 3.76288 6.86156 4.32899 6.84237 4.93687C6.83077 5.3041 6.99622 5.71231 7.33518 6.27349C7.8225 7.0803 8.06616 7.4837 8.52367 7.74185C8.98119 8 9.51502 8 10.5827 8H13.4174C14.4851 8 15.0189 8 15.4764 7.74185C15.934 7.4837 16.1776 7.0803 16.6649 6.27349C17.0039 5.71231 17.1693 5.3041 17.1578 4.93687C17.1386 4.32899 16.8438 3.76288 16.3568 3.39856C15.8241 3 14.8483 3 12.8968 3Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path
d="M11.9997 21C14.5065 21 16.7739 20.2029 18.4058 18.9167C21.3162 16.6229 19.5034 12.5886 17.0723 9.7919C16.3614 8.97409 15.8568 8.29774 15.8568 8H8.14252C8.14252 8.29774 7.63793 8.97409 6.92702 9.7919C4.49591 12.5886 2.6831 16.6229 5.59348 18.9167C7.22538 20.2029 9.49283 21 11.9997 21Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M17 8C17 6.34315 15.6569 5 14 5H10.5C8.567 5 7 6.567 7 8.5C7 10.433 8.567 12 10.5 12H13.5C15.433 12 17 13.567 17 15.5C17 17.433 15.433 19 13.5 19H10C8.34315 19 7 17.6569 7 16M12 3V21"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M9 15C5.68629 15 3 12.3137 3 9C3 5.68629 5.68629 3 9 3C12.3137 3 15 5.68629 15 9"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path
d="M15 9.1641C16.5607 7.96907 18.7947 8.26555 19.9898 9.82629C21.1848 11.387 20.8883 13.621 19.3276 14.8161"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M12.802 13L12.2031 14.2805" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path d="M17.3743 15.8457L16.7754 17.1262" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
<path d="M14.1497 16.2871L13.5508 17.5676" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
<path d="M11.0037 16.8418L10.4043 18.1225" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
<path d="M15.576 19.6875L14.9766 20.9682" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
<path d="M12.5291 19.6895L11.9297 20.9701" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13 12C11.7857 12.9122 11 14.3643 11 16C11 18.7614 13.2386 21 16 21C18.7614 21 21 18.7614 21 16C21 14.3644 20.2147 12.9122 19.0005 12"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M19 12V6C19 4.34315 17.6569 3 16 3C14.3431 3 13 4.34315 13 6V12" stroke="black"
stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path
d="M16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14ZM16 14V7"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M9 4L3 4" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M9 12L3 12" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M9 8L5 8" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M15 18C15 19.6569 16.3431 21 18 21C19.6569 21 21 19.6569 21 18C21 16.3431 19.6569 15 18 15H3"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path
d="M15 9C15 7.34315 16.3431 6 18 6C19.6569 6 21 7.34315 21 9C21 10.6569 19.6569 12 18 12H3"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M7 6C7 4.34315 8.34315 3 10 3C11.6569 3 13 4.34315 13 6C13 7.65685 11.6569 9 10 9H3"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M9.38867 2.99951L12.3884 5.99928L15.3882 2.99951" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M15.3882 20.9998L12.3884 18L9.38867 20.9998" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M12.3887 6V18" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path d="M18.6839 4.90186L17.5859 8.99962L21.6837 10.0976" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M6.09547 19.0976L7.19346 14.9998L3.0957 13.9019" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M17.5857 9L7.19336 15" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path d="M21.6837 13.9023L17.5859 15.0003L18.6839 19.0981" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M3.0957 10.0976L7.19346 8.99962L6.09547 4.90186" stroke="black" stroke-width="1.6"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path d="M17.5857 14.999L7.19336 8.99902" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 11.6014C3 16.7922 7.09519 21.0001 12.1469 21.0001C15.273 21.0001 18.0328 19.3887 19.6826 16.9301C20.3756 15.8974 20.7221 15.381 20.41 14.8411C20.0979 14.3012 19.3273 14.3541 17.7861 14.4599C10.8576 14.9353 8.58646 10.8359 8.23195 6.90293C8.066 5.0618 7.98302 4.14123 7.355 3.93743C6.72697 3.73363 6.26281 4.26556 5.3345 5.32941C3.8829 6.99296 3 9.19125 3 11.6014Z"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
stroke="black" stroke-width="1.6" class="my-path"></path>
<path d="M12 3V5" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M12 19V21" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
<path d="M18.3654 5.63623L16.9512 7.05044" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
<path d="M7.05093 16.9497L5.63672 18.3639" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
<path d="M18.3654 18.3644L16.9512 16.9502" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
<path d="M7.05093 7.04996L5.63672 5.63574" stroke="black" stroke-width="1.6"
stroke-linecap="round" class="my-path"></path>
<path d="M21 12L19 12" stroke="black" stroke-width="1.6" stroke-linecap="round"
class="my-path"></path>
<path d="M5 12L3 12" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path">
</path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 11H6.5C4.567 11 3 12.567 3 14.5C3 16.433 4.567 18 6.5 18H17.5C19.433 18 21 16.433 21 14.5C21 12.567 19.433 11 17.5 11H17"
stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M7 11C7 8.23858 9.23858 6 12 6C14.7614 6 17 8.23858 17 11" stroke="black"
stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M7.02736 12.001L6.97736 12.001" stroke="black" stroke-width="2.5"
stroke-linecap="round" class="my-path"></path>
<path d="M12.041 12.001L11.991 12.001" stroke="black" stroke-width="2.5"
stroke-linecap="round" class="my-path"></path>
<path d="M17.0547 12.001L17.0047 12.001" stroke="black" stroke-width="2.5"
stroke-linecap="round" class="my-path"></path>
</svg>
</div>
Sizing
You can adjust attributes such as size, color, stroke width, opacity, and more using Tailwind CSS utility classes. There are a number of options for sizing icons in your project. Change the width and height to adjust the icon size.
<div class="flex items-center gap-8 justify-center w-full flex-wrap">
<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M21 12.9998V10.3535C21 9.20576 21 8.6319 20.7237 8.1624C20.4475 7.69289 19.9458 7.41421 18.9426 6.85683L15.8851 5.15826C13.9861 4.10321 13.0365 3.57568 12 3.57568C10.9635 3.57568 10.0139 4.10321 8.11485 5.15826L5.05743 6.85683C4.05415 7.41421 3.55252 7.69289 3.27626 8.1624C3 8.6319 3 9.20576 3 10.3535V12.9998C3 16.7711 3 18.6567 4.17157 19.8283C5.34315 20.9998 7.22876 20.9998 11 20.9998H13C16.7712 20.9998 18.6569 20.9998 19.8284 19.8283C21 18.6567 21 16.7711 21 12.9998Z" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M10.2853 12L4 8M10.2853 12L4 19M10.2853 12C11.3315 12.6658 12.6685 12.6658 13.7146 12M20 8.00001L13.7146 12M13.7146 12L20 19" stroke="black" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M21 12.9998V10.3535C21 9.20576 21 8.6319 20.7237 8.1624C20.4475 7.69289 19.9458 7.41421 18.9426 6.85683L15.8851 5.15826C13.9861 4.10321 13.0365 3.57568 12 3.57568C10.9635 3.57568 10.0139 4.10321 8.11485 5.15826L5.05743 6.85683C4.05415 7.41421 3.55252 7.69289 3.27626 8.1624C3 8.6319 3 9.20576 3 10.3535V12.9998C3 16.7711 3 18.6567 4.17157 19.8283C5.34315 20.9998 7.22876 20.9998 11 20.9998H13C16.7712 20.9998 18.6569 20.9998 19.8284 19.8283C21 18.6567 21 16.7711 21 12.9998Z" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M10.2853 12L4 8M10.2853 12L4 19M10.2853 12C11.3315 12.6658 12.6685 12.6658 13.7146 12M20 8.00001L13.7146 12M13.7146 12L20 19" stroke="black" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M21 12.9998V10.3535C21 9.20576 21 8.6319 20.7237 8.1624C20.4475 7.69289 19.9458 7.41421 18.9426 6.85683L15.8851 5.15826C13.9861 4.10321 13.0365 3.57568 12 3.57568C10.9635 3.57568 10.0139 4.10321 8.11485 5.15826L5.05743 6.85683C4.05415 7.41421 3.55252 7.69289 3.27626 8.1624C3 8.6319 3 9.20576 3 10.3535V12.9998C3 16.7711 3 18.6567 4.17157 19.8283C5.34315 20.9998 7.22876 20.9998 11 20.9998H13C16.7712 20.9998 18.6569 20.9998 19.8284 19.8283C21 18.6567 21 16.7711 21 12.9998Z" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M10.2853 12L4 8M10.2853 12L4 19M10.2853 12C11.3315 12.6658 12.6685 12.6658 13.7146 12M20 8.00001L13.7146 12M13.7146 12L20 19" stroke="black" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M21 12.9998V10.3535C21 9.20576 21 8.6319 20.7237 8.1624C20.4475 7.69289 19.9458 7.41421 18.9426 6.85683L15.8851 5.15826C13.9861 4.10321 13.0365 3.57568 12 3.57568C10.9635 3.57568 10.0139 4.10321 8.11485 5.15826L5.05743 6.85683C4.05415 7.41421 3.55252 7.69289 3.27626 8.1624C3 8.6319 3 9.20576 3 10.3535V12.9998C3 16.7711 3 18.6567 4.17157 19.8283C5.34315 20.9998 7.22876 20.9998 11 20.9998H13C16.7712 20.9998 18.6569 20.9998 19.8284 19.8283C21 18.6567 21 16.7711 21 12.9998Z" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M10.2853 12L4 8M10.2853 12L4 19M10.2853 12C11.3315 12.6658 12.6685 12.6658 13.7146 12M20 8.00001L13.7146 12M13.7146 12L20 19" stroke="black" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M21 12.9998V10.3535C21 9.20576 21 8.6319 20.7237 8.1624C20.4475 7.69289 19.9458 7.41421 18.9426 6.85683L15.8851 5.15826C13.9861 4.10321 13.0365 3.57568 12 3.57568C10.9635 3.57568 10.0139 4.10321 8.11485 5.15826L5.05743 6.85683C4.05415 7.41421 3.55252 7.69289 3.27626 8.1624C3 8.6319 3 9.20576 3 10.3535V12.9998C3 16.7711 3 18.6567 4.17157 19.8283C5.34315 20.9998 7.22876 20.9998 11 20.9998H13C16.7712 20.9998 18.6569 20.9998 19.8284 19.8283C21 18.6567 21 16.7711 21 12.9998Z" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M10.2853 12L4 8M10.2853 12L4 19M10.2853 12C11.3315 12.6658 12.6685 12.6658 13.7146 12M20 8.00001L13.7146 12M13.7146 12L20 19" stroke="black" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="45px" height="45px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M21 12.9998V10.3535C21 9.20576 21 8.6319 20.7237 8.1624C20.4475 7.69289 19.9458 7.41421 18.9426 6.85683L15.8851 5.15826C13.9861 4.10321 13.0365 3.57568 12 3.57568C10.9635 3.57568 10.0139 4.10321 8.11485 5.15826L5.05743 6.85683C4.05415 7.41421 3.55252 7.69289 3.27626 8.1624C3 8.6319 3 9.20576 3 10.3535V12.9998C3 16.7711 3 18.6567 4.17157 19.8283C5.34315 20.9998 7.22876 20.9998 11 20.9998H13C16.7712 20.9998 18.6569 20.9998 19.8284 19.8283C21 18.6567 21 16.7711 21 12.9998Z" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M10.2853 12L4 8M10.2853 12L4 19M10.2853 12C11.3315 12.6658 12.6685 12.6658 13.7146 12M20 8.00001L13.7146 12M13.7146 12L20 19" stroke="black" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="50px" height="50px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M21 12.9998V10.3535C21 9.20576 21 8.6319 20.7237 8.1624C20.4475 7.69289 19.9458 7.41421 18.9426 6.85683L15.8851 5.15826C13.9861 4.10321 13.0365 3.57568 12 3.57568C10.9635 3.57568 10.0139 4.10321 8.11485 5.15826L5.05743 6.85683C4.05415 7.41421 3.55252 7.69289 3.27626 8.1624C3 8.6319 3 9.20576 3 10.3535V12.9998C3 16.7711 3 18.6567 4.17157 19.8283C5.34315 20.9998 7.22876 20.9998 11 20.9998H13C16.7712 20.9998 18.6569 20.9998 19.8284 19.8283C21 18.6567 21 16.7711 21 12.9998Z" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M10.2853 12L4 8M10.2853 12L4 19M10.2853 12C11.3315 12.6658 12.6685 12.6658 13.7146 12M20 8.00001L13.7146 12M13.7146 12L20 19" stroke="black" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="55px" height="55px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M21 12.9998V10.3535C21 9.20576 21 8.6319 20.7237 8.1624C20.4475 7.69289 19.9458 7.41421 18.9426 6.85683L15.8851 5.15826C13.9861 4.10321 13.0365 3.57568 12 3.57568C10.9635 3.57568 10.0139 4.10321 8.11485 5.15826L5.05743 6.85683C4.05415 7.41421 3.55252 7.69289 3.27626 8.1624C3 8.6319 3 9.20576 3 10.3535V12.9998C3 16.7711 3 18.6567 4.17157 19.8283C5.34315 20.9998 7.22876 20.9998 11 20.9998H13C16.7712 20.9998 18.6569 20.9998 19.8284 19.8283C21 18.6567 21 16.7711 21 12.9998Z" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M10.2853 12L4 8M10.2853 12L4 19M10.2853 12C11.3315 12.6658 12.6685 12.6658 13.7146 12M20 8.00001L13.7146 12M13.7146 12L20 19" stroke="black" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="60px" height="60px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M21 12.9998V10.3535C21 9.20576 21 8.6319 20.7237 8.1624C20.4475 7.69289 19.9458 7.41421 18.9426 6.85683L15.8851 5.15826C13.9861 4.10321 13.0365 3.57568 12 3.57568C10.9635 3.57568 10.0139 4.10321 8.11485 5.15826L5.05743 6.85683C4.05415 7.41421 3.55252 7.69289 3.27626 8.1624C3 8.6319 3 9.20576 3 10.3535V12.9998C3 16.7711 3 18.6567 4.17157 19.8283C5.34315 20.9998 7.22876 20.9998 11 20.9998H13C16.7712 20.9998 18.6569 20.9998 19.8284 19.8283C21 18.6567 21 16.7711 21 12.9998Z" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M10.2853 12L4 8M10.2853 12L4 19M10.2853 12C11.3315 12.6658 12.6685 12.6658 13.7146 12M20 8.00001L13.7146 12M13.7146 12L20 19" stroke="black" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="round" class="my-path"></path>
</svg>
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M21 12.9998V10.3535C21 9.20576 21 8.6319 20.7237 8.1624C20.4475 7.69289 19.9458 7.41421 18.9426 6.85683L15.8851 5.15826C13.9861 4.10321 13.0365 3.57568 12 3.57568C10.9635 3.57568 10.0139 4.10321 8.11485 5.15826L5.05743 6.85683C4.05415 7.41421 3.55252 7.69289 3.27626 8.1624C3 8.6319 3 9.20576 3 10.3535V12.9998C3 16.7711 3 18.6567 4.17157 19.8283C5.34315 20.9998 7.22876 20.9998 11 20.9998H13C16.7712 20.9998 18.6569 20.9998 19.8284 19.8283C21 18.6567 21 16.7711 21 12.9998Z" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M10.2853 12L4 8M10.2853 12L4 19M10.2853 12C11.3315 12.6658 12.6685 12.6658 13.7146 12M20 8.00001L13.7146 12M13.7146 12L20 19" stroke="black" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="round" class="my-path"></path>
</svg>
</div>
Icons with a List
SVG icons within a list using Tailwind CSS involve combining the SVG markup with HTML list elements and applying Tailwind CSS utility classes for styling and alignment.
- Home
- Profile
- Messages
- Settings
<div class="w-full">
<ul class="w-60 flex flex-col">
<li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 hover:text-indigo-600 transition-all duration-300 text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
<svg class="flex-none fill-gray-900" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.56826 12.688L1.77756 12.8096L2.56826 12.688ZM3.21817 16.9124L2.42747 17.034L3.21817 16.9124ZM20.7836 16.9124L19.9929 16.7907L20.7836 16.9124ZM21.4335 12.688L20.6428 12.5663L21.4335 12.688ZM18.944 6.86024L18.4853 7.51562L18.944 6.86024ZM15.4417 4.40856L15.9004 3.75318V3.75318L15.4417 4.40856ZM8.56011 4.40856L8.10134 3.75318L8.56011 4.40856ZM5.05772 6.86024L4.59895 6.20485L5.05772 6.86024ZM19.3805 21.2769L18.8596 20.6697V20.6697L19.3805 21.2769ZM4.62125 21.2769L5.14215 20.6697H5.14215L4.62125 21.2769ZM2.49086 9.20932L3.22654 9.52359L2.49086 9.20932ZM10.5009 17.2C10.0591 17.2 9.70088 17.5582 9.70088 18C9.70088 18.4418 10.0591 18.8 10.5009 18.8V17.2ZM13.5009 18.8C13.9427 18.8 14.3009 18.4418 14.3009 18C14.3009 17.5582 13.9427 17.2 13.5009 17.2V18.8ZM1.77756 12.8096L2.42747 17.034L4.00886 16.7907L3.35896 12.5663L1.77756 12.8096ZM9.1484 22.8H14.8534V21.2H9.1484V22.8ZM21.5743 17.034L22.2242 12.8096L20.6428 12.5663L19.9929 16.7907L21.5743 17.034ZM19.4028 6.20485L15.9004 3.75318L14.9829 5.06395L18.4853 7.51562L19.4028 6.20485ZM8.10134 3.75318L4.59895 6.20485L5.51649 7.51562L9.01888 5.06395L8.10134 3.75318ZM15.9004 3.75318C15.0835 3.18133 14.4175 2.7137 13.835 2.3962C13.2347 2.06903 12.6557 1.86199 12.0009 1.86199V3.46199C12.2917 3.46199 12.6014 3.54604 13.0692 3.80106C13.5549 4.06575 14.1364 4.47141 14.9829 5.06395L15.9004 3.75318ZM9.01888 5.06395C9.86536 4.47141 10.4469 4.06575 10.9325 3.80106C11.4004 3.54604 11.7101 3.46199 12.0009 3.46199V1.86199C11.346 1.86199 10.767 2.06903 10.1668 2.3962C9.58427 2.7137 8.91826 3.18133 8.10134 3.75318L9.01888 5.06395ZM22.2242 12.8096C22.3597 11.929 22.4715 11.2087 22.5009 10.6107C22.5313 9.9942 22.4793 9.43988 22.2466 8.89506L20.7752 9.52359C20.879 9.76665 20.9264 10.0547 20.9029 10.5321C20.8785 11.028 20.7833 11.6531 20.6428 12.5663L22.2242 12.8096ZM18.4853 7.51562C19.2422 8.04549 19.7596 8.40888 20.1348 8.73413C20.496 9.04717 20.6714 9.28053 20.7752 9.52359L22.2466 8.89506C22.0139 8.35024 21.6493 7.92945 21.1828 7.52513C20.7305 7.133 20.1327 6.71579 19.4028 6.20485L18.4853 7.51562ZM14.8534 22.8C16.0608 22.8 17.0409 22.8015 17.8217 22.7034C18.6247 22.6025 19.3158 22.3865 19.9014 21.8841L18.8596 20.6697C18.6024 20.8904 18.258 21.036 17.6222 21.1159C16.9642 21.1985 16.1022 21.2 14.8534 21.2V22.8ZM19.9929 16.7907C19.803 18.025 19.6705 18.8768 19.4887 19.5146C19.3131 20.1308 19.1168 20.4491 18.8596 20.6697L19.9014 21.8841C20.4871 21.3816 20.8056 20.7315 21.0274 19.9531C21.2431 19.1963 21.3907 18.2274 21.5743 17.034L19.9929 16.7907ZM2.42747 17.034C2.61106 18.2274 2.75864 19.1963 2.97433 19.9531C3.19617 20.7315 3.51468 21.3816 4.10034 21.8841L5.14215 20.6697C4.88495 20.4491 4.68867 20.1308 4.51305 19.5146C4.33129 18.8768 4.19875 18.025 4.00886 16.7907L2.42747 17.034ZM9.1484 21.2C7.89959 21.2 7.03756 21.1985 6.37955 21.1159C5.74381 21.036 5.39935 20.8904 5.14215 20.6697L4.10034 21.8841C4.686 22.3865 5.37702 22.6025 6.18009 22.7034C6.96089 22.8015 7.941 22.8 9.1484 22.8V21.2ZM3.35896 12.5663C3.21846 11.6531 3.1233 11.028 3.09889 10.5321C3.07539 10.0547 3.12271 9.76665 3.22654 9.52359L1.75517 8.89506C1.52244 9.43988 1.47047 9.9942 1.50082 10.6107C1.53026 11.2087 1.64208 11.929 1.77756 12.8096L3.35896 12.5663ZM4.59895 6.20485C3.86903 6.71579 3.27129 7.133 2.81892 7.52513C2.35248 7.92945 1.9879 8.35024 1.75517 8.89506L3.22654 9.52359C3.33037 9.28053 3.50579 9.04717 3.86693 8.73413C4.24213 8.40888 4.75953 8.04549 5.51649 7.51562L4.59895 6.20485ZM10.5009 18.8H13.5009V17.2L10.5009 17.2V18.8Z" fill="currentColor" stroke-width="3"></path>
</svg>
Home
</li>
<li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 hover:text-indigo-600 transition-all duration-300 text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
<svg class="flex-none fill-gray-900" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1601 11.4032L12.0846 12.1996C12.1181 12.2028 12.1519 12.2038 12.1855 12.2028L12.1601 11.4032ZM11.8301 11.4032L11.8046 12.2028C11.836 12.2038 11.8674 12.2029 11.8987 12.2002L11.8301 11.4032ZM16.4401 7.20632L17.2401 7.20983V7.20632H16.4401ZM12.2355 10.6067C12.0831 10.5923 11.9147 10.5929 11.7614 10.6061L11.8987 12.2002C11.9654 12.1945 12.037 12.1951 12.0846 12.1996L12.2355 10.6067ZM11.8555 10.6036C9.86902 10.5403 8.36006 9.01086 8.36006 7.20632H6.76006C6.76006 9.94914 9.0311 12.1144 11.8046 12.2028L11.8555 10.6036ZM8.36006 7.20632C8.36006 5.36615 9.94178 3.8 12.0001 3.8V2.2C9.13833 2.2 6.76006 4.40437 6.76006 7.20632H8.36006ZM12.0001 3.8C14.0495 3.8 15.6401 5.3673 15.6401 7.20632H17.2401C17.2401 4.40323 14.8506 2.2 12.0001 2.2V3.8ZM15.6401 7.2028C15.6321 9.01079 14.1203 10.5403 12.1346 10.6036L12.1855 12.2028C14.9598 12.1144 17.228 9.94921 17.2401 7.20983L15.6401 7.2028ZM8.5 15.1684H15.5V13.5684H8.5V15.1684ZM15.5 20.2H8.5V21.8H15.5V20.2ZM8.5 20.2C6.96753 20.2 5.8 19.0334 5.8 17.6842H4.2C4.2 19.9975 6.16648 21.8 8.5 21.8V20.2ZM18.2 17.6842C18.2 19.0334 17.0325 20.2 15.5 20.2V21.8C17.8335 21.8 19.8 19.9975 19.8 17.6842H18.2ZM15.5 15.1684C17.0325 15.1684 18.2 16.335 18.2 17.6842H19.8C19.8 15.3709 17.8335 13.5684 15.5 13.5684V15.1684ZM8.5 13.5684C6.16648 13.5684 4.2 15.3709 4.2 17.6842H5.8C5.8 16.335 6.96753 15.1684 8.5 15.1684V13.5684Z" fill="currentColor" stroke-width="1.1"></path>
</svg>
Profile
</li>
<li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 hover:text-indigo-600 transition-all duration-300 text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
<svg class="flex-none stroke-gray-900" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.00017 10.7608C2.0002 7.22186 2.00021 5.45239 3.04181 4.3078C3.12632 4.21493 3.21515 4.1261 3.30803 4.04159C4.45262 3 6.22198 3 9.76069 3C11.195 3 12.6369 3 14.0022 3C17.7721 3.00001 19.6571 3.00001 20.8286 4.17158C22.0002 5.34314 22.0002 7.22876 22.0003 11C22.0003 11.8333 22.0003 12.6667 22.0002 13.5C22.0002 14.8957 22.0002 15.5936 21.8279 16.1615C21.44 17.4396 20.4398 18.4398 19.1617 18.8277C18.5938 19 17.8958 19 16.5 19V19C15.7153 19 15.4119 19.1702 15.0563 19.3115C14.0356 19.7169 13.1336 21.6253 12.0002 21.6253C10.8667 21.6253 9.96477 19.7169 8.94405 19.3115C7.99061 18.9328 7.00755 19 6.00017 19V19C3.84257 19 2.00019 17.3235 2.00016 15.1659C2.00014 13.6975 2.00015 12.2292 2.00017 10.7608Z" stroke="currentColor" stroke-width="1.3"></path>
</svg>
Messages
</li>
<li class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-semibold bg-white border border-gray-300 hover:text-indigo-600 transition-all duration-300 text-gray-900 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
<svg class="flex-none stroke-gray-900" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 10.2969V13.7031C2 14.1734 2.38209 14.5546 2.85343 14.5546C5.13807 14.5546 6.56533 17.0329 5.43635 19.0191C5.20068 19.4264 5.34054 19.9472 5.74873 20.1824L8.7051 21.8855C9.11329 22.1206 9.63524 21.9811 9.87091 21.5738C11.0151 19.5963 13.878 19.6055 15.0375 21.5741C15.2731 21.9814 15.7951 22.1209 16.2033 21.8858L19.1596 20.1827C19.5678 19.9475 19.7077 19.4267 19.472 19.0194C18.3432 17.0329 19.7708 14.5546 22.0557 14.5546C22.527 14.5546 22.9091 14.1734 22.9091 13.7031V10.2969C22.9091 9.82661 22.527 9.44536 22.0557 9.44536C19.771 9.44536 18.3438 6.96706 19.4727 4.98087C19.7084 4.57358 19.5686 4.05278 19.1604 3.81763L16.204 2.11454C15.7958 1.87939 15.2738 2.01894 15.0382 2.42623C13.8786 4.39479 11.0159 4.40344 9.87163 2.42592C9.63596 2.01863 9.11401 1.87908 8.70582 2.11423L5.74944 3.81732C5.34125 4.05247 5.2014 4.57327 5.43707 4.98056C6.56584 6.96709 5.13826 9.44536 2.85343 9.44536C2.38209 9.44536 2 9.82661 2 10.2969Z" stroke="currentColor" stroke-width="1.2"></path>
<path d="M15.6364 11.5455C15.6364 13.3027 14.2118 14.7273 12.4545 14.7273C10.6973 14.7273 9.27273 13.3027 9.27273 11.5455C9.27273 9.78819 10.6973 8.36364 12.4545 8.36364C14.2118 8.36364 15.6364 9.78819 15.6364 11.5455Z" stroke="currentColor" stroke-width="1.2"></path>
</svg>
Settings
</li>
</ul>
</div>
Icon with Button
You can use SVG icons with buttons in Tailwind CSS. It can be social media buttons, icon buttons, or buttons with icons on the left or right side.
<div class="flex items-center gap-8 justify-center flex-wrap">
<button type="button" class="w-11 h-11 bg-indigo-500 rounded-lg flex items-center justify-center cursor-pointer transition-all duration-500 hover:bg-indigo-700">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M1.22229 5.00019H8.77785M5.00007 8.77797V1.22241" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<button type="button" class="py-2.5 pl-6 pr-3.5 text-base bg-indigo-500 text-white rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 flex items-center hover:bg-indigo-700">
Primary
<svg class="ml-3" width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M1 9L3.58579 6.41421C4.25245 5.74755 4.58579 5.41421 4.58579 5C4.58579 4.58579 4.25245 4.25245 3.58579 3.58579L1 1" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<button type="button" class="py-2.5 px-4 inline-flex justify-center items-center gap-2 bg-indigo-500 text-white rounded-lg cursor-pointer font-semibold text-base text-center shadow-xs transition-all duration-500 hover:bg-indigo-700">
<span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
<span> class="sr-only">Loading...</span>
</span>
Loading
</button>
<button class="py-1.5 pr-5 pl-3 rounded-lg flex items-center group gap-1 bg-indigo-500 text-lg font-manrope font-semibold text-white border border-indigo-500 shadow-md shadow-transparent transition-all duration-500 hover:bg-indigo-600">
<svg class="fill-white transition-all duration-300" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 72 72" fill="none">
<path d="M46.4927 38.6403L47.7973 30.3588H39.7611V24.9759C39.7611 22.7114 40.883 20.4987 44.4706 20.4987H48.1756V13.4465C46.018 13.1028 43.8378 12.9168 41.6527 12.8901C35.0385 12.8901 30.7204 16.8626 30.7204 24.0442V30.3588H23.3887V38.6403H30.7204V58.671H39.7611V38.6403H46.4927Z"
fill=""/>
</svg>facebook
</button>
</div>
Icon with Link
Use SVG icons with anchor tag links using Tailwind CSS utility classes. Using icons in links shows that the icon is clickable and provides precise information.
<div class="w-full relative">
<div class="flex items-center justify-center flex-wrap w-full gap-8">
<a href="javascript:;" class="py-2 px-5 border border-solid bg-indigo-600 border-gray-300 rounded-full gap-2 text-xs text-white font-semibold flex items-center justify-between transition-all duration-500 hover:bg-indigo-700">
View More
<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 9L3.58579 6.41421C4.25245 5.74755 4.58579 5.41421 4.58579 5C4.58579 4.58579 4.25245 4.25245 3.58579 3.58579L1 1" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
<a href="javascript:;" class="flex flex-row items-center justify-center gap-2 text-base font-semibold text-indigo-600 lg:justify-start hover:text-indigo-700 ">Link CTA
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 15L11.0858 11.4142C11.7525 10.7475 12.0858 10.4142 12.0858 10C12.0858 9.58579 11.7525 9.25245 11.0858 8.58579L7.5 5" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
<a href="javascript:;" class="group flex items-center gap-2 text-sm font-semibold text-indigo-600 transition-all duration-500 ">Read more
<svg class="transition-all duration-500 group-hover:translate-x-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.25 9L14.25 9M10.5 13.5L14.4697 9.53033C14.7197 9.28033 14.8447 9.15533 14.8447 9C14.8447 8.84467 14.7197 8.71967 14.4697 8.46967L10.5 4.5" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
<a href="javascript:;" class="w-9 h-9 rounded-full bg-indigo-600 flex justify-center items-center hover:bg-indigo-700">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<g id="Social Media">
<path id="Vector" d="M11.3214 8.93666L16.4919 3.05566H15.2667L10.7772 8.16205L7.1914 3.05566H3.05566L8.47803 10.7774L3.05566 16.9446H4.28097L9.022 11.552L12.8088 16.9446H16.9446L11.3211 8.93666H11.3214ZM9.64322 10.8455L9.09382 10.0765L4.72246 3.95821H6.60445L10.1322 8.8959L10.6816 9.66481L15.2672 16.083H13.3852L9.64322 10.8458V10.8455Z" fill="white"></path>
</g>
</svg>
</a>
<a href="javascript:;" class="w-9 h-9 rounded-full bg-indigo-600 flex justify-center items-center hover:bg-indigo-700">
<svg class="w-[1.25rem] h-[1.125rem] text-white" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.70975 7.93663C4.70975 6.65824 5.76102 5.62163 7.0582 5.62163C8.35537 5.62163 9.40721 6.65824 9.40721 7.93663C9.40721 9.21502 8.35537 10.2516 7.0582 10.2516C5.76102 10.2516 4.70975 9.21502 4.70975 7.93663ZM3.43991 7.93663C3.43991 9.90608 5.05982 11.5025 7.0582 11.5025C9.05658 11.5025 10.6765 9.90608 10.6765 7.93663C10.6765 5.96719 9.05658 4.37074 7.0582 4.37074C5.05982 4.37074 3.43991 5.96719 3.43991 7.93663ZM9.97414 4.22935C9.97408 4.39417 10.0236 4.55531 10.1165 4.69239C10.2093 4.82946 10.3413 4.93633 10.4958 4.99946C10.6503 5.06259 10.8203 5.07916 10.9844 5.04707C11.1484 5.01498 11.2991 4.93568 11.4174 4.81918C11.5357 4.70268 11.6163 4.55423 11.649 4.39259C11.6817 4.23095 11.665 4.06339 11.6011 3.91109C11.5371 3.7588 11.4288 3.6286 11.2898 3.53698C11.1508 3.44536 10.9873 3.39642 10.8201 3.39635H10.8197C10.5955 3.39646 10.3806 3.48424 10.222 3.64043C10.0635 3.79661 9.97434 4.00843 9.97414 4.22935ZM4.21142 13.5892C3.52442 13.5584 3.15101 13.4456 2.90286 13.3504C2.57387 13.2241 2.33914 13.0738 2.09235 12.8309C1.84555 12.588 1.69278 12.3569 1.56527 12.0327C1.46854 11.7882 1.3541 11.4201 1.32287 10.7431C1.28871 10.0111 1.28189 9.79119 1.28189 7.93669C1.28189 6.08219 1.28927 5.86291 1.32287 5.1303C1.35416 4.45324 1.46944 4.08585 1.56527 3.84069C1.69335 3.51647 1.84589 3.28513 2.09235 3.04191C2.3388 2.79869 2.57331 2.64813 2.90286 2.52247C3.1509 2.42713 3.52442 2.31435 4.21142 2.28358C4.95417 2.24991 5.17729 2.24319 7.0582 2.24319C8.9391 2.24319 9.16244 2.25047 9.90582 2.28358C10.5928 2.31441 10.9656 2.42802 11.2144 2.52247C11.5434 2.64813 11.7781 2.79902 12.0249 3.04191C12.2717 3.2848 12.4239 3.51647 12.552 3.84069C12.6487 4.08513 12.7631 4.45324 12.7944 5.1303C12.8285 5.86291 12.8354 6.08219 12.8354 7.93669C12.8354 9.79119 12.8285 10.0105 12.7944 10.7431C12.7631 11.4201 12.6481 11.7881 12.552 12.0327C12.4239 12.3569 12.2714 12.5882 12.0249 12.8309C11.7784 13.0736 11.5434 13.2241 11.2144 13.3504C10.9663 13.4457 10.5928 13.5585 9.90582 13.5892C9.16306 13.6229 8.93994 13.6296 7.0582 13.6296C5.17645 13.6296 4.95395 13.6229 4.21142 13.5892ZM4.15307 1.03424C3.40294 1.06791 2.89035 1.18513 2.4427 1.3568C1.9791 1.53408 1.58663 1.77191 1.19446 2.1578C0.802277 2.54369 0.56157 2.93108 0.381687 3.38797C0.207498 3.82941 0.0885535 4.3343 0.0543922 5.07358C0.0196672 5.81402 0.0117188 6.05074 0.0117188 7.93663C0.0117188 9.82252 0.0196672 10.0592 0.0543922 10.7997C0.0885535 11.539 0.207498 12.0439 0.381687 12.4853C0.56157 12.9419 0.802334 13.3297 1.19446 13.7155C1.58658 14.1012 1.9791 14.3387 2.4427 14.5165C2.89119 14.6881 3.40294 14.8054 4.15307 14.839C4.90479 14.8727 5.1446 14.8811 7.0582 14.8811C8.9718 14.8811 9.212 14.8732 9.96332 14.839C10.7135 14.8054 11.2258 14.6881 11.6737 14.5165C12.137 14.3387 12.5298 14.1014 12.9219 13.7155C13.3141 13.3296 13.5543 12.9419 13.7347 12.4853C13.9089 12.0439 14.0284 11.539 14.062 10.7997C14.0962 10.0587 14.1041 9.82252 14.1041 7.93663C14.1041 6.05074 14.0962 5.81402 14.062 5.07358C14.0278 4.33424 13.9089 3.82913 13.7347 3.38797C13.5543 2.93135 13.3135 2.5443 12.9219 2.1578C12.5304 1.7713 12.137 1.53408 11.6743 1.3568C11.2258 1.18513 10.7135 1.06735 9.96388 1.03424C9.21256 1.00058 8.97236 0.992188 7.05876 0.992188C5.14516 0.992188 4.90479 1.00002 4.15307 1.03424Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
Icons with badges
You can also use SVG icons within badges to show some counts or important information in numeric format.
Cart
$1250
<div class="flex items-center justify-center gap-8">
<button class="relative">
<svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M10.7146 19.5C10.7146 20.3284 10.0239 21 9.17176 21C8.31967 21 7.62891 20.3284 7.62891 19.5" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M16.8865 19.5C16.8865 20.3284 16.1957 21 15.3436 21C14.4915 21 13.8008 20.3284 13.8008 19.5" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M3.51429 6L4.96114 13.7354C5.25319 15.2968 5.39921 16.0775 5.95475 16.5387C6.51029 17 7.30451 17 8.89296 17H15.6218C17.2103 17 18.0046 17 18.5601 16.5387C19.1157 16.0774 19.2617 15.2967 19.5537 13.7352L20.1146 10.7352C20.5248 8.54152 20.7299 7.44469 20.1301 6.72234C19.5303 6 18.4144 6 16.1827 6H3.51429ZM3.51429 6L3 3" stroke="black" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
<span> class="absolute w-5 h-5 rounded-md -top-1.5 -right-2 flex items-center justify-center text-xs font-medium bg-emerald-800 text-white">8</span>
</button>
<button class="relative">
<svg class="rounded-xl" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 93 92" fill="none">
<rect x="1.13867" width="91.5618" height="91.5618" rx="15" fill="url(#paint0_linear_7092_54439)"/>
<path d="M38.3762 45.7808C38.3762 41.1786 42.1083 37.4468 46.7132 37.4468C51.3182 37.4468 55.0522 41.1786 55.0522 45.7808C55.0522 50.383 51.3182 54.1148 46.7132 54.1148C42.1083 54.1148 38.3762 50.383 38.3762 45.7808ZM33.8683 45.7808C33.8683 52.8708 39.619 58.618 46.7132 58.618C53.8075 58.618 59.5581 52.8708 59.5581 45.7808C59.5581 38.6908 53.8075 32.9436 46.7132 32.9436C39.619 32.9436 33.8683 38.6908 33.8683 45.7808ZM57.0648 32.4346C57.0646 33.0279 57.2404 33.608 57.5701 34.1015C57.8997 34.595 58.3684 34.9797 58.9168 35.2069C59.4652 35.4342 60.0688 35.4939 60.6511 35.3784C61.2334 35.2628 61.7684 34.9773 62.1884 34.5579C62.6084 34.1385 62.8945 33.6041 63.0105 33.0222C63.1266 32.4403 63.0674 31.8371 62.8404 31.2888C62.6134 30.7406 62.2289 30.2719 61.7354 29.942C61.2418 29.6122 60.6615 29.436 60.0679 29.4358H60.0667C59.2708 29.4361 58.5077 29.7522 57.9449 30.3144C57.3821 30.8767 57.0655 31.6392 57.0648 32.4346ZM36.6072 66.1302C34.1683 66.0192 32.8427 65.6132 31.9618 65.2702C30.7939 64.8158 29.9606 64.2746 29.0845 63.4002C28.2083 62.5258 27.666 61.6938 27.2133 60.5266C26.8699 59.6466 26.4637 58.3214 26.3528 55.884C26.2316 53.2488 26.2073 52.4572 26.2073 45.781C26.2073 39.1048 26.2336 38.3154 26.3528 35.678C26.4639 33.2406 26.8731 31.918 27.2133 31.0354C27.668 29.8682 28.2095 29.0354 29.0845 28.1598C29.9594 27.2842 30.7919 26.7422 31.9618 26.2898C32.8423 25.9466 34.1683 25.5406 36.6072 25.4298C39.244 25.3086 40.036 25.2844 46.7132 25.2844C53.3904 25.2844 54.1833 25.3106 56.8223 25.4298C59.2612 25.5408 60.5846 25.9498 61.4677 26.2898C62.6356 26.7422 63.4689 27.2854 64.345 28.1598C65.2211 29.0342 65.7615 29.8682 66.2161 31.0354C66.5595 31.9154 66.9658 33.2406 67.0767 35.678C67.1979 38.3154 67.2221 39.1048 67.2221 45.781C67.2221 52.4572 67.1979 53.2466 67.0767 55.884C66.9656 58.3214 66.5573 59.6462 66.2161 60.5266C65.7615 61.6938 65.2199 62.5266 64.345 63.4002C63.4701 64.2738 62.6356 64.8158 61.4677 65.2702C60.5872 65.6134 59.2612 66.0194 56.8223 66.1302C54.1855 66.2514 53.3934 66.2756 46.7132 66.2756C40.033 66.2756 39.2432 66.2514 36.6072 66.1302ZM36.4001 20.9322C33.7371 21.0534 31.9174 21.4754 30.3282 22.0934C28.6824 22.7316 27.2892 23.5878 25.897 24.977C24.5047 26.3662 23.6502 27.7608 23.0116 29.4056C22.3933 30.9948 21.971 32.8124 21.8497 35.4738C21.7265 38.1394 21.6982 38.9916 21.6982 45.7808C21.6982 52.57 21.7265 53.4222 21.8497 56.0878C21.971 58.7494 22.3933 60.5668 23.0116 62.156C23.6502 63.7998 24.5049 65.196 25.897 66.5846C27.289 67.9732 28.6824 68.8282 30.3282 69.4682C31.9204 70.0862 33.7371 70.5082 36.4001 70.6294C39.0687 70.7506 39.92 70.7808 46.7132 70.7808C53.5065 70.7808 54.3592 70.7526 57.0264 70.6294C59.6896 70.5082 61.5081 70.0862 63.0983 69.4682C64.7431 68.8282 66.1373 67.9738 67.5295 66.5846C68.9218 65.1954 69.7745 63.7998 70.4149 62.156C71.0332 60.5668 71.4575 58.7492 71.5768 56.0878C71.698 53.4202 71.7262 52.57 71.7262 45.7808C71.7262 38.9916 71.698 38.1394 71.5768 35.4738C71.4555 32.8122 71.0332 30.9938 70.4149 29.4056C69.7745 27.7618 68.9196 26.3684 67.5295 24.977C66.1395 23.5856 64.7431 22.7316 63.1003 22.0934C61.5081 21.4754 59.6894 21.0514 57.0284 20.9322C54.3612 20.811 53.5085 20.7808 46.7152 20.7808C39.922 20.7808 39.0687 20.809 36.4001 20.9322Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_7092_54439" x1="90.9407" y1="91.5618" x2="-0.621143" y2="-2.46459e-06" gradientUnits="userSpaceOnUse">
<stop stop-color="#FBE18A"/>
<stop offset="0.21" stop-color="#FCBB45"/>
<stop offset="0.38" stop-color="#F75274"/>
<stop offset="0.52" stop-color="#D53692"/>
<stop offset="0.74" stop-color="#8F39CE"/>
<stop offset="1" stop-color="#5B4FE9"/>
</linearGradient>
</defs>
</svg>
<span> class="absolute w-3 h-3 rounded-full -top-1 -right-1 flex items-center justify-center text-sm font-medium bg-red-200 "></span>
</button>
<button class="relative">
<svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M6.02457 10.2588L13.7371 17.9713C15.4075 19.6417 18.1157 19.6417 19.7861 17.9713C20.4542 17.3032 20.4542 16.2199 19.7861 15.5517L17.6437 13.4093C17.1565 12.9221 16.3666 12.9221 15.8794 13.4093C15.3922 13.8965 14.6023 13.8965 14.1151 13.4093L12.1744 11.4686L10.2337 9.52789C9.74648 9.0407 9.74648 8.25079 10.2337 7.7636C10.7209 7.2764 10.7209 6.4865 10.2337 5.9993L8.44418 4.2098C7.77602 3.54165 6.69273 3.54165 6.02457 4.2098C4.35418 5.88019 4.35418 8.58842 6.02457 10.2588Z" stroke="black" stroke-width="1.6" class="my-path"></path>
<path> class="stroke-red-600" d="M16.5 4L16.5 7L19.5 7" stroke="" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
<span> class="absolute w-4 h-4 rounded-full -top-1.5 -right-1.5 flex items-center justify-center text-xs font-medium bg-red-100 text-red-600">3</span>
</button>
<button class="relative">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="26" viewBox="0 0 29 26" fill="none">
<path d="M7.7289 1C4.0132 1 1 3.98225 1 7.66161C1 10.6317 2.17756 17.6809 13.7688 24.8068C13.9764 24.9332 14.2148 25 14.4578 25C14.7008 25 14.9392 24.9332 15.1468 24.8068C26.738 17.6809 27.9156 10.6317 27.9156 7.66161C27.9156 3.98225 24.9024 1 21.1867 1C17.471 1 14.4578 5.03734 14.4578 5.03734C14.4578 5.03734 11.4446 1 7.7289 1Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span> class="absolute w-5 h-5 rounded-full -top-2.5 -right-2.5 flex items-center justify-center text-xs font-medium bg-green-400 text-white">3</span>
</button>
<div class="flex items-center gap-2">
<button class="rounded-full w-11 h-11 text-gray-700 bg-gray-50 relative flex items-center justify-center group transition-all duration-500 hover:bg-gray-100 hover:text-gray-900">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path> d="M10.7146 19.5C10.7146 20.3284 10.0239 21 9.17176 21C8.31967 21 7.62891 20.3284 7.62891 19.5" stroke="currentcolor" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M16.8865 19.5C16.8865 20.3284 16.1957 21 15.3436 21C14.4915 21 13.8008 20.3284 13.8008 19.5" stroke="currentcolor" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path> d="M3.51429 6L4.96114 13.7354C5.25319 15.2968 5.39921 16.0775 5.95475 16.5387C6.51029 17 7.30451 17 8.89296 17H15.6218C17.2103 17 18.0046 17 18.5601 16.5387C19.1157 16.0774 19.2617 15.2967 19.5537 13.7352L20.1146 10.7352C20.5248 8.54152 20.7299 7.44469 20.1301 6.72234C19.5303 6 18.4144 6 16.1827 6H3.51429ZM3.51429 6L3 3" stroke="currentcolor" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg>
</button>
<div class="block">
<p> class="text-xs font-normal text-gray-500">Cart</p>
<h6> class="text-sm font-medium text-gray-900">$1250</h6>
</div>
</div>
</div>
Input with icons
Use SVG icons within the input component of Tailwind CSS, such as icons of email, user, lock, etc., for form inputs.
<div class="flex items-start gap-8 justify-start flex-col w-full">
<div class="relative text-gray-500 focus-within:text-gray-900 ">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none ">
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"
class=" stroke-current ml-1">
<path>
d="M1.87651 3.83325L6.79885 7.07932C8.55702 8.13423 9.43612 8.66169 10.402 8.6387C11.3678 8.61572 12.2208 8.04705 13.9268 6.90971L18.1232 3.83325M8.33317 14.6666H11.6665C14.8092 14.6666 16.3805 14.6666 17.3569 13.6903C18.3332 12.714 18.3332 11.1426 18.3332 7.99992C18.3332 4.85722 18.3332 3.28587 17.3569 2.30956C16.3805 1.33325 14.8092 1.33325 11.6665 1.33325H8.33317C5.19047 1.33325 3.61913 1.33325 2.64281 2.30956C1.6665 3.28587 1.6665 4.85722 1.6665 7.99992C1.6665 11.1426 1.6665 12.714 2.64281 13.6903C3.61913 14.6666 5.19047 14.6666 8.33317 14.6666Z"
stroke="" stroke-width="1.5" stroke-linecap="round"></path>
</svg>
</div>
<input type="text" id="default-search"
class="block w-full max-w-sm pr-4 pl-12 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed"
placeholder="name@pagedone.com">
</div>
<div class="relative">
<select id="countries"
class="w-16 text-gray-900 text-sm rounded-lg block absolute top-0 h-10 px-4 focus:outline-none">
<option> value="US" selected="">IN</option>
<option> value="CA">CA</option>
<option> value="FR">Fr</option>
</select>
<input type="text"
class="block w-full max-w-xs pr-4 pl-20 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed"
placeholder="+91 000 000 0000">
</div>
<div class="relative ">
<div class=" absolute left-0 top-0 py-3 px-4">
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path>
d="M4.63636 15.4545V0.90909H5.56818V15.4545H4.63636ZM7.77273 5.27273C7.70455 4.69697 7.42803 4.25 6.94318 3.93182C6.45833 3.61364 5.86364 3.45455 5.15909 3.45455C4.64394 3.45455 4.19318 3.53788 3.80682 3.70455C3.42424 3.87121 3.125 4.10038 2.90909 4.39205C2.69697 4.68371 2.59091 5.01515 2.59091 5.38636C2.59091 5.69697 2.66477 5.96401 2.8125 6.1875C2.96402 6.4072 3.1572 6.59091 3.39205 6.73864C3.62689 6.88258 3.87311 7.00189 4.13068 7.09659C4.38826 7.1875 4.625 7.26136 4.84091 7.31818L6.02273 7.63636C6.32576 7.71591 6.66288 7.82576 7.03409 7.96591C7.40909 8.10606 7.76705 8.29735 8.10795 8.53977C8.45265 8.77841 8.73674 9.08523 8.96023 9.46023C9.18371 9.83523 9.29545 10.2955 9.29545 10.8409C9.29545 11.4697 9.13068 12.0379 8.80114 12.5455C8.47538 13.053 7.99811 13.4564 7.36932 13.7557C6.74432 14.0549 5.98485 14.2045 5.09091 14.2045C4.25758 14.2045 3.53598 14.0701 2.92614 13.8011C2.32008 13.5322 1.8428 13.1572 1.49432 12.6761C1.14962 12.1951 0.954545 11.6364 0.909091 11H2.36364C2.40152 11.4394 2.54924 11.803 2.80682 12.0909C3.06818 12.375 3.39773 12.5871 3.79545 12.7273C4.19697 12.8636 4.62879 12.9318 5.09091 12.9318C5.62879 12.9318 6.11174 12.8447 6.53977 12.6705C6.9678 12.4924 7.30682 12.2462 7.55682 11.9318C7.80682 11.6136 7.93182 11.2424 7.93182 10.8182C7.93182 10.4318 7.82386 10.1174 7.60795 9.875C7.39205 9.63258 7.10795 9.43561 6.75568 9.28409C6.40341 9.13258 6.02273 9 5.61364 8.88636L4.18182 8.47727C3.27273 8.21591 2.55303 7.8428 2.02273 7.35795C1.49242 6.87311 1.22727 6.23864 1.22727 5.45455C1.22727 4.80303 1.40341 4.23485 1.75568 3.75C2.11174 3.26136 2.58902 2.88258 3.1875 2.61364C3.78977 2.34091 4.46212 2.20455 5.20455 2.20455C5.95455 2.20455 6.62121 2.33901 7.20455 2.60795C7.78788 2.87311 8.25 3.23674 8.59091 3.69886C8.93561 4.16098 9.11742 4.68561 9.13636 5.27273H7.77273Z"
fill="#6B7280"></path>
</svg>
</div>
<input type="text"
class="block w-full max-w-xs pr-16 pl-9 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-lg placeholder-gray-300 focus:outline-none leading-relaxed"
placeholder="6,000.00">
<select id="countries"
class="w-20 text-gray-900 text-sm rounded-lg block absolute top-0 right-3 h-10 px-4 border-l focus:outline-none">
<option> value="USD" selected="">USD</option>
<option> value="CA">CA</option>
<option> value="FR">Fr</option>
</select>
</div>
</div>
Dropdown Menu with Icons
Use SVG icons for drop-down menu list items. You can show icons such as downloads, save files, notifications, or logouts in your list.
<div class="w-full relative h-64">
<div class="dropdown relative inline-flex">
<button type="button" data-target="dropdown-with-icon" class="dropdown-toggle inline-flex justify-center items-center gap-2 py-3 px-6 text-sm bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700 ">
Dropdown with icons
<svg class="dropdown-open:rotate-180 w-2.5 h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<div id="dropdown-with-icon" class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-72 mt-2 open hidden" aria-labelledby="dropdown-with-icon">
<ul class="py-2">
<li>
<a class="flex items-center gap-3 px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4167 7.5C16.5673 7.5 17.5 8.43274 17.5 9.58333V12.5C17.5 14.857 17.5 16.0355 16.7678 16.7678C16.0355 17.5 14.857 17.5 12.5 17.5H7.5C5.14298 17.5 3.96447 17.5 3.23223 16.7678C2.5 16.0355 2.5 14.857 2.5 12.5V9.58333C2.5 8.43274 3.43274 7.5 4.58333 7.5M10 13.3333L6.50337 9.83671M10 13.3333L13.4966 9.83671M10 13.3333V2.5" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Downloads
</a>
</li>
<li>
<a class="flex items-center gap-3 px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 10.8333H11.6667M5 13.3333H8.33333M11.3883 1.94437V5.55548C11.3883 6.47595 12.1345 7.22214 13.055 7.22214H16.6661M10.6985 1.66666H8.5C5.67157 1.66666 4.25736 1.66666 3.37868 2.54534C2.5 3.42402 2.5 4.83823 2.5 7.66666V12.3333C2.5 15.1618 2.5 16.576 3.37868 17.4546C4.25736 18.3333 5.67156 18.3333 8.49997 18.3333C9.30683 18.3333 10.1356 18.3333 10.945 18.3333C13.7731 18.3333 15.1871 18.3333 16.0658 17.4546C16.9444 16.576 16.9444 15.1618 16.9444 12.3333V7.91257C16.9444 7.47054 16.7689 7.04662 16.4563 6.73406L11.877 2.15481C11.5645 1.84225 11.1406 1.66666 10.6985 1.66666Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round"></path>
</svg>
Saved Files
</a>
</li>
<li>
<a class="flex items-center gap-3 px-6 py-2 hover:bg-gray-100 text-gray-900 font-medium" href="javascript:;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.1116 9.16666C15.2575 10.9606 15.8104 12.3731 16.3475 13.3586C16.7027 14.0104 16.2305 15 15.4881 15H4.51181C3.76939 15 3.27739 13.995 3.61578 13.3342C4.28214 12.0329 4.99996 9.94714 4.99996 6.99999C4.99996 5.58582 5.52663 4.22916 6.46413 3.22916C7.40246 2.22916 8.67496 1.66666 9.99996 1.66666C10.2808 1.66666 10.56 1.69166 10.8333 1.74166M11.4416 17.5C11.2953 17.7528 11.0851 17.9626 10.832 18.1085C10.579 18.2544 10.292 18.3312 9.99996 18.3312C9.70788 18.3312 9.42094 18.2544 9.1679 18.1085C8.91487 17.9626 8.70464 17.7528 8.5583 17.5M15 6.66666C15.663 6.66666 16.2989 6.40326 16.7677 5.93442C17.2366 5.46558 17.5 4.8297 17.5 4.16666C17.5 3.50362 17.2366 2.86773 16.7677 2.39889C16.2989 1.93005 15.663 1.66666 15 1.66666C14.3369 1.66666 13.701 1.93005 13.2322 2.39889C12.7634 2.86773 12.5 3.50362 12.5 4.16666C12.5 4.8297 12.7634 5.46558 13.2322 5.93442C13.701 6.40326 14.3369 6.66666 15 6.66666Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Notifications
</a>
</li>
<li>
<a class="flex items-center gap-3 px-6 py-2 hover:bg-gray-100 text-red-500 font-medium" href="javascript:;">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.16667 17.5L5.83333 17.5V17.5C3.98765 17.5 2.5 16.0123 2.5 14.1667V14.1667L2.5 5.83333V5.83333C2.5 3.98765 3.98765 2.5 5.83333 2.5V2.5L9.16667 2.5M8.22814 10L17.117 10M14.3393 6.66667L17.0833 9.41074C17.3611 9.68852 17.5 9.82741 17.5 10C17.5 10.1726 17.3611 10.3115 17.0833 10.5893L14.3393 13.3333" stroke="#EF4444" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Log Out
</a>
</li>
</ul>
</div>
</div>
</div>