Add icons to this collection by clicking the heart icon.
Joystick icon - also known as technology, joystick, video game, gamepad, game controller, arcade stick, electronics, gaming, and gamer. Created in a clean gradient style, 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="512"
height="512"
viewBox="0 0 512 512"
>
<linearGradient
id="d"
x1="74.98"
x2="437.019"
y1="437.019"
y2="74.98"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#560dff" />
<stop offset="1" stop-color="#73ecff" />
</linearGradient>
<radialGradient
id="e"
cx="-7934.432"
cy="-5314.798"
r="327.176"
gradientTransform="matrix(1 0 0 1.208 8191.445 6540.34)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#6b23ea" stop-opacity=".7" />
<stop offset=".036" stop-color="#6a35eb" stop-opacity=".675" />
<stop offset=".119" stop-color="#6859ee" stop-opacity=".617" />
<stop offset=".209" stop-color="#6778f0" stop-opacity=".554" />
<stop offset=".307" stop-color="#6591f2" stop-opacity=".485" />
<stop offset=".416" stop-color="#64a4f3" stop-opacity=".409" />
<stop offset=".543" stop-color="#64b2f4" stop-opacity=".32" />
<stop offset=".702" stop-color="#63baf5" stop-opacity=".209" />
<stop offset="1" stop-color="#63bcf5" stop-opacity="0" />
</radialGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#170794" />
<stop offset="1" stop-color="#63bcf5" />
</linearGradient>
<linearGradient
id="f"
x1="107.533"
x2="493.979"
y1="556.036"
y2="169.591"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="g"
x1="256"
x2="256"
y1="470.31"
y2="379.888"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#445ce0" stop-opacity="0" />
<stop offset="1" stop-color="#170794" />
</linearGradient>
<linearGradient id="b">
<stop offset="0" stop-color="#73ecff" />
<stop offset="1" stop-color="#fff" />
</linearGradient>
<linearGradient
id="h"
x1="15.404"
x2="291.138"
y1="559.346"
y2="283.611"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="i"
x1="156.329"
x2="385.567"
y1="395.479"
y2="166.24"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="j"
x1="256"
x2="256"
y1="337.372"
y2="291.197"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#c2fff0" stop-opacity="0" />
<stop offset=".185" stop-color="#bdfcf0" stop-opacity=".185" />
<stop offset=".402" stop-color="#aff2f1" stop-opacity=".402" />
<stop offset=".633" stop-color="#98e1f2" stop-opacity=".633" />
<stop offset=".875" stop-color="#77caf4" stop-opacity=".875" />
<stop offset="1" stop-color="#63bcf5" />
</linearGradient>
<linearGradient id="c">
<stop offset="0" stop-color="#389fff" />
<stop offset=".121" stop-color="#45affa" />
<stop offset=".573" stop-color="#73e9e7" />
<stop offset=".79" stop-color="#85ffe0" />
<stop offset=".881" stop-color="#9dffe6" />
<stop offset="1" stop-color="#c2fff0" />
</linearGradient>
<linearGradient
id="k"
x1="78.965"
x2="479.26"
y1="518.338"
y2="118.043"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="l"
x1="256"
x2="256"
y1="372.649"
y2="285.413"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#6b23ea" />
<stop offset=".101" stop-color="#6948ed" stop-opacity=".899" />
<stop offset=".22" stop-color="#676bef" stop-opacity=".78" />
<stop offset=".346" stop-color="#6689f1" stop-opacity=".654" />
<stop offset=".479" stop-color="#649ff3" stop-opacity=".521" />
<stop offset=".623" stop-color="#64aff4" stop-opacity=".377" />
<stop offset=".784" stop-color="#63b9f5" stop-opacity=".216" />
<stop offset="1" stop-color="#63bcf5" stop-opacity="0" />
</linearGradient>
<linearGradient
id="m"
x1="56.175"
x2="497.804"
y1="387.927"
y2="-53.703"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="n"
x1="114.422"
x2="440.305"
y1="299.261"
y2="-26.623"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="o"
x1="169.383"
x2="463.616"
y1="215.21"
y2="-79.023"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="p"
x1="177.063"
x2="407.548"
y1="198.243"
y2="-32.243"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="q"
x1="163.015"
x2="316.746"
y1="212.121"
y2="58.39"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="r"
x1="190.896"
x2="311.274"
y1="184.264"
y2="63.887"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="s"
x1="184.599"
x2="536.963"
y1="402.475"
y2="50.111"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="t"
x1="182.918"
x2="533.057"
y1="351.753"
y2="1.614"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="u"
x1="441.003"
x2="-178.573"
y1="482.692"
y2="-136.884"
gradientTransform="matrix(-1 0 0 1 512 0)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="v"
x1="439.881"
x2="-88.309"
y1="603.08"
y2="74.89"
gradientTransform="matrix(-1 0 0 1 512 0)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="w"
x1="550.016"
x2="112.96"
y1="564.727"
y2="127.672"
gradientTransform="matrix(-1 0 0 1 512 0)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="x"
x1="-95.02"
x2="454.569"
y1="765.617"
y2="216.028"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#389fff" />
<stop offset=".121" stop-color="#45affa" />
<stop offset=".573" stop-color="#73e9e7" />
<stop offset=".79" stop-color="#85ffe0" />
<stop offset=".88" stop-color="#9dffe6" />
<stop offset=".999" stop-color="#c2fff0" />
</linearGradient>
<circle cx="256" cy="256" r="256" fill="url(#d)" />
<circle cx="256" cy="256" r="256" fill="url(#e)" />
<path
fill="url(#f)"
d="M127.199 392.748c.251 10.05.528 20.1.83 30.15 3.655 3.753 7.305 7.509 10.948 11.268 2.899 2.989 6.759 4.794 10.737 4.998a2084.123 2084.123 0 0 0 212.574 0c3.977-.202 7.838-2.006 10.737-4.998 3.643-3.758 7.293-7.515 10.948-11.268.302-10.05.578-20.1.83-30.15a2764.421 2764.421 0 0 1-257.604 0z"
/>
<path
fill="url(#g)"
d="M127.199 392.748c.251 10.05.528 20.1.83 30.15 3.655 3.753 7.305 7.509 10.948 11.268 2.899 2.989 6.759 4.794 10.737 4.998a2084.123 2084.123 0 0 0 212.574 0c3.977-.202 7.838-2.006 10.737-4.998 3.643-3.758 7.293-7.515 10.948-11.268.302-10.05.578-20.1.83-30.15a2764.421 2764.421 0 0 1-257.604 0z"
/>
<path
fill="url(#h)"
d="M240.645 288.113c.013 15.371.033 30.741.06 46.113 15.295.05 30.59.025 45.885-.075.053-15.358.093-30.717.12-46.075-15.355.049-30.71.062-46.065.037z"
/>
<path
fill="url(#i)"
d="M225.29 288.075c.027 15.358.067 30.717.12 46.075 10.197.067 20.393.1 30.59.1v-46.125c-10.237 0-20.473-.016-30.71-.05z"
/>
<path
fill="url(#j)"
d="M225.29 288.075c.027 15.358.067 30.717.12 46.075 20.393.133 40.787.133 61.181 0 .053-15.358.093-30.717.12-46.075-20.474.067-40.948.067-61.421 0z"
/>
<path
fill="url(#k)"
d="M315.394 323.047a15.124 15.124 0 0 0-10.807-4.381c-32.391.279-64.783.279-97.174 0a15.121 15.121 0 0 0-10.807 4.381c-3.588 3.569-7.17 7.129-10.747 10.679.041 5.096.085 10.191.132 15.288 46.672.816 93.344.816 140.016 0 .047-5.096.092-10.191.132-15.288-3.575-3.55-7.158-7.11-10.745-10.679z"
/>
<path
fill="url(#l)"
d="M315.394 323.047a15.124 15.124 0 0 0-10.807-4.381c-32.391.279-64.783.279-97.174 0a15.121 15.121 0 0 0-10.807 4.381c-3.588 3.569-7.17 7.129-10.747 10.679.041 5.096.085 10.191.132 15.288 46.672.816 93.344.816 140.016 0 .047-5.096.092-10.191.132-15.288-3.575-3.55-7.158-7.11-10.745-10.679z"
/>
<path
fill="url(#m)"
d="M256 42.125v246c15.355 0 30.71-.037 46.065-.112.068-26.198.078-52.397.03-78.596a61.112 61.112 0 0 1 8.136-30.615 34106.62 34106.62 0 0 0 12.051-20.936c6.44-11.168 10.047-24.124 9.883-38.035-.614-42.033-34.901-77.662-76.165-77.706z"
/>
<path
fill="url(#n)"
d="M308.988 150.035c5.305-9.219 8.044-19.75 7.944-30.504-.491-42.185-27.921-77.376-60.932-77.406-41.264.045-75.551 35.673-76.165 77.706-.163 13.912 3.45 26.865 9.891 38.035-.023-.015 12.032 20.922 12.043 20.936a61.115 61.115 0 0 1 8.136 30.615c-.048 26.198-.038 52.397.03 78.595 20.473.1 40.947.133 61.42.1.019-21.496.024-42.991.017-64.487a30.734 30.734 0 0 1 4.107-15.362 29825.902 29825.902 0 0 0 33.509-58.228z"
/>
<path
fill="url(#o)"
d="M256 57.5c-33.114.02-60.544 28.34-60.932 62.032-.1 10.745 2.642 21.277 7.951 30.503-.059-.056 26.342 45.838 26.383 45.881 11.789 20.454 41.407 20.454 53.195 0 8.843-15.344 17.651-30.65 26.391-45.881 5.305-9.219 8.044-19.75 7.944-30.504-.389-33.693-27.818-62.01-60.932-62.031z"
/>
<path
fill="url(#p)"
d="M301.699 119.299c.203 25.391-20.298 45.808-45.699 45.826-25.401-.018-45.902-20.435-45.699-45.826.216-25.381 20.717-46.416 45.699-46.424 24.981.008 45.483 21.043 45.699 46.424z"
/>
<path
fill="url(#q)"
d="M286.466 119.133c.092 16.959-13.561 30.611-30.466 30.617-16.905-.007-30.557-13.659-30.466-30.617.095-16.955 13.748-30.882 30.466-30.883 16.719.001 30.371 13.928 30.466 30.883z"
/>
<path
fill="url(#r)"
d="M263.633 134.382c-16.875-.037-30.506-13.704-30.426-30.673.007-1.881.191-3.721.518-5.512-5.037 5.521-8.153 12.879-8.191 20.936-.092 16.959 13.561 30.611 30.466 30.617 15.027-.002 27.486-10.806 29.993-25.115a30.232 30.232 0 0 1-22.36 9.747z"
/>
<path
fill="url(#s)"
d="M331.017 292.955c-4.148-11.841-15.523-20.318-28.919-20.279-10.244.033-20.488.055-30.732.066 7.238 10.24 14.465 20.465 21.668 30.661 10.226-.054 20.453-.129 30.679-.227 5.276-.053 9.033-5.283 7.304-10.221z"
/>
<path
fill="url(#t)"
d="M300.317 293.17c-4.17-11.909-15.556-20.441-28.95-20.428-20.488.022-40.976 0-61.465-.066-13.395-.037-24.772 8.438-28.919 20.279-1.73 4.938 2.028 10.168 7.304 10.221 34.916.334 69.832.41 104.748.227 5.274-.029 9.021-5.266 7.282-10.233z"
/>
<path
fill="url(#u)"
d="M179.805 361.549c.241 21.235.547 42.47.918 63.705a2279.791 2279.791 0 0 1-60.222-2.792c-4.156-.25-7.64-3.82-7.775-7.961-.27-8.358-.521-16.715-.752-25.074 22.465-8.837 45.088-18.185 67.831-27.878z"
/>
<path
fill="url(#v)"
d="M173.052 417.367a9502.727 9502.727 0 0 1-.866-55.989c76.322 11.955 152.314 21.928 227.841 28.048a5246.29 5246.29 0 0 1-.752 25.074c-.135 4.141-3.62 7.71-7.775 7.961a2274.879 2274.879 0 0 1-210.777 2.792c-4.157-.137-7.593-3.678-7.671-7.886z"
/>
<path
fill="url(#w)"
d="M120.344 368.59a6589.357 6589.357 0 0 0 31.812-31.044c2.831-2.778 6.704-4.301 10.761-4.22a4692 4692 0 0 0 61.18.815 31590.35 31590.35 0 0 1-51.481 57.735 2825.31 2825.31 0 0 1-60.643-2.45c-.22-7.955 2.787-15.424 8.371-20.836z"
/>
<path
fill="url(#x)"
d="M391.656 368.59a6589.357 6589.357 0 0 1-31.812-31.044c-2.831-2.778-6.704-4.301-10.761-4.22a4691.573 4691.573 0 0 1-124.985.815 15.112 15.112 0 0 0-10.793 4.408 14985.843 14985.843 0 0 1-32.089 31.975c-5.64 5.601-8.728 13.263-8.6 21.353a2816.082 2816.082 0 0 0 227.41-2.45c.221-7.956-2.787-15.425-8.37-20.837z"
/>
</svg>
More icons in the same style and category