Add icons to this collection by clicking the heart icon.
Joystick icon - also known as technology, electronic, joystick, video game, gamepad, game controller, multimedia, gamer, and miscellaneous. Created in a clean lineal color style with a white, silver, gray, black, yellow, and teal finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="682.667"
height="682.667"
viewBox="0 0 682.667 682.667"
>
<defs>
<clipPath id="a" clipPathUnits="userSpaceOnUse">
<path d="M0 512h512V0H0Z" />
</clipPath>
</defs>
<path
d="M404.5 254.5h-297v200h297z"
transform="matrix(1.33333 0 0 -1.33333 0 682.667)"
fill="#8697a6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 682.667)">
<path
d="M0 0h140v170a89.594 89.594 0 0 1-5.148 30H0Z"
transform="translate(107.5 254.5)"
fill="#6b7d8e"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M404.5 137.5h-297v117h297z"
fill="#546370"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-100h50c49.626 0 90 40.374 90 90V0Z"
transform="translate(107.5 254.5)"
fill="#3d4751"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c27.614 0 50 22.386 50 50v260.5h-160V110C-110 49.249-60.751 0 0 0"
transform="translate(117.5 7.5)"
fill="#6b7d8e"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c60.751 0 110 49.249 110 110v200.5H-50V50C-50 22.386-27.614 0 0 0"
transform="translate(394.5 7.5)"
fill="#6b7d8e"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0a50 50 0 0 1-44.721 27.639h-155.197A49.998 49.998 0 0 1-244.639 0l-26.181-52.361h297z"
transform="translate(378.32 476.86)"
fill="#546370"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c0 22.091 17.909 40 40 40H-67.598a50.001 50.001 0 0 1-44.722-27.639L-138.5-40H40C17.909-40 0-22.091 0 0"
transform="translate(246 464.5)"
fill="#3d4751"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M107.5 234.5h297v40h-297z"
fill="#6b7d8e"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v163.5h-160V-97c0-27.614 22.386-50 50-50 34.159 0 64.68 15.57 84.856 40H-95c-13.807 0-25 11.193-25 25v45c0 20.435 16.565 37 37 37z"
transform="translate(504.5 154.5)"
fill="#546370"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-100c-27.614 0-50 22.386-50 50v180c0 27.614 22.386 50 50 50H0c27.614 0 50-22.386 50-50V50C50 22.386 27.614 0 0 0"
transform="translate(454.5 194.5)"
fill="#8697a6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c-11.046 0-20 8.954-20 20v218.998c-22.822-4.633-40-24.809-40-48.998V10c0-27.614 22.386-50 50-50H90c24.189 0 44.365 17.178 48.998 40z"
transform="translate(364.5 234.5)"
fill="#6b7d8e"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0v-40h139.441A90.49 90.49 0 0 1 140-30V0Z"
transform="translate(107.5 274.5)"
fill="#546370"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c3.38 0 6.716.194 10 .559V163.5h-160V-37c0-60.751 49.249-110 110-110 24.189 0 44.365 17.178 48.998 40H-40c-38.66 0-70 31.34-70 70 0 20.435 16.565 37 37 37z"
transform="translate(157.5 154.5)"
fill="#546370"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-100c-27.614 0-50 22.386-50 50v180c0 27.614 22.386 50 50 50H0c27.614 0 50-22.386 50-50V50C50 22.386 27.614 0 0 0"
transform="translate(157.5 194.5)"
fill="#8697a6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c-11.046 0-20 8.954-20 20v218.998c-22.822-4.633-40-24.809-40-48.998V10c0-27.614 22.386-50 50-50H90c24.189 0 44.365 17.178 48.998 40z"
transform="translate(67.5 234.5)"
fill="#6b7d8e"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-20v20c0 11.046-8.954 20-20 20s-20-8.954-20-20V0h-20c-11.046 0-20-8.954-20-20s8.954-20 20-20h20v-20c0-11.046 8.954-20 20-20s20 8.954 20 20v20H0c11.046 0 20 8.954 20 20S11.046 0 0 0"
transform="translate(147.5 394.5)"
fill="#fff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="m0 0 14.142 14.142c7.811 7.811 7.811 20.474 0 28.284-7.81 7.811-20.474 7.811-28.284 0l-14.142-14.142-14.142 14.142c-7.811 7.811-20.474 7.811-28.285 0-7.81-7.81-7.81-20.473 0-28.284L-56.568 0l-14.143-14.142c-7.81-7.811-7.81-20.474 0-28.284 7.811-7.811 20.474-7.811 28.285 0l14.142 14.142 14.142-14.142c7.81-7.811 20.474-7.811 28.284 0 7.811 7.81 7.811 20.473 0 28.284z"
transform="translate(432.784 374.5)"
fill="#a4e7ff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c-7.81 7.81-7.811 20.474 0 28.284l14.142 14.142L0 56.569c-7.81 7.81-20.474 7.81-28.284 0-7.811-7.811-7.811-20.474 0-28.285l14.142-14.142L-28.284 0c-7.811-7.81-7.811-20.474 0-28.284 7.81-7.811 20.473-7.811 28.284 0l14.142 14.142 14.142-14.142c7.811-7.811 20.474-7.811 28.285 0 7.81 7.81 7.81 20.474 0 28.284L42.426 14.142 28.284 0C20.474-7.81 7.81-7.81 0 0"
transform="translate(390.358 360.358)"
fill="#5ad6ff"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-80c-11.046 0-20 8.954-20 20s8.954 20 20 20H0c11.046 0 20-8.954 20-20S11.046 0 0 0"
transform="translate(147.5 234.5)"
fill="#73da8c"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c0 11.046 8.954 20 20 20h-40c-11.046 0-20-8.954-20-20s8.954-20 20-20h40C8.954-20 0-11.046 0 0"
transform="translate(87.5 254.5)"
fill="#29ce69"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-80c-11.046 0-20 8.954-20 20s8.954 20 20 20H0c11.046 0 20-8.954 20-20S11.046 0 0 0"
transform="translate(444.5 234.5)"
fill="#f4e74d"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c0 11.046 8.954 20 20 20h-40c-11.046 0-20-8.954-20-20s8.954-20 20-20h40C8.954-20 0-11.046 0 0"
transform="translate(384.5 254.5)"
fill="#eedb00"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0c0 11.046 8.954 20 20 20h20v20c0 11.046-8.954 20-20 20S0 51.046 0 40V20h-20c-11.046 0-20-8.954-20-20s8.954-20 20-20H0v-20c0-11.046 8.954-20 20-20s20 8.954 20 20v20H20C8.954-20 0-11.046 0 0"
transform="translate(87.5 374.5)"
fill="#efe6e6"
fill-opacity="1"
fill-rule="nonzero"
stroke="none"
/>
<path
d="M0 0h-123.99"
transform="translate(291.49 137.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-25.009"
transform="translate(344.5 137.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-98.982"
transform="translate(305.491 234.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v-127c0-60.751 49.249-110 110-110v0c27.614 0 50 22.386 50 50v137"
transform="translate(7.5 244.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v-137c0-27.614 22.386-50 50-50v0c60.751 0 110 49.249 110 110V49.998"
transform="translate(344.5 194.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0-1.18 2.361A50.001 50.001 0 0 1-45.902 30h-155.196A50.001 50.001 0 0 1-245.82 2.361L-247 .001"
transform="translate(379.5 474.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-100c-27.614 0-50 22.386-50 50v180c0 27.614 22.386 50 50 50H0c27.614 0 50-22.386 50-50V50C50 22.386 27.614 0 0 0Z"
transform="translate(454.5 194.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0v-116c0-27.614-22.386-50-50-50h-100c-27.614 0-50 22.386-50 50V64c0 27.614 22.386 50 50 50h100c27.614 0 50-22.386 50-50V28"
transform="translate(207.5 360.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-20v20c0 11.046-8.954 20-20 20v0c-11.046 0-20-8.954-20-20V0h-20c-11.046 0-20-8.954-20-20s8.954-20 20-20h20v-20c0-11.046 8.954-20 20-20v0c11.046 0 20 8.954 20 20v20H0c11.046 0 20 8.954 20 20S11.046 0 0 0Z"
transform="translate(147.5 394.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="m0 0 14.142 14.142c7.811 7.811 7.811 20.474 0 28.284-7.81 7.811-20.474 7.811-28.284 0l-14.142-14.142-14.142 14.142c-7.811 7.811-20.474 7.811-28.285 0-7.81-7.81-7.81-20.473 0-28.284L-56.568 0l-14.143-14.142c-7.81-7.811-7.81-20.474 0-28.284 7.811-7.811 20.474-7.811 28.285 0l14.142 14.142 14.142-14.142c7.81-7.811 20.474-7.811 28.284 0 7.811 7.81 7.811 20.473 0 28.284z"
transform="translate(432.784 374.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h97"
transform="translate(207.5 424.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-80c-11.046 0-20 8.954-20 20v0c0 11.046 8.954 20 20 20H0c11.046 0 20-8.954 20-20v0C20 8.954 11.046 0 0 0Z"
transform="translate(147.5 234.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
<path
d="M0 0h-80c-11.046 0-20 8.954-20 20v0c0 11.046 8.954 20 20 20H0c11.046 0 20-8.954 20-20v0C20 8.954 11.046 0 0 0Z"
transform="translate(444.5 234.5)"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
stroke-dasharray="none"
stroke-opacity="1"
/>
</g>
</svg>
More icons in the same style and category