Add icons to this collection by clicking the heart icon.
Joystick icon - also known as joystick, game controller, game boy advance, games, arcade stick, gaming, gamer, and vr gaming. Created in a clean flat gradient style with a gray, maroon, green, teal, purple, and orange 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="512"
height="512"
viewBox="0 0 52 52"
>
<linearGradient
id="f"
x1="26.259"
x2="24.817"
y1="35.219"
y2="24.897"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#dae7ed" />
<stop offset=".713" stop-color="#a2b9bd" />
<stop offset="1" stop-color="#8ca6aa" />
</linearGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#dae7ed" />
<stop offset="1" stop-color="#8ca6aa" />
</linearGradient>
<linearGradient
id="g"
x1="2.677"
x2="49.339"
y1="35.967"
y2="35.967"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="h"
x1="19.573"
x2="32.426"
y1="33.388"
y2="33.388"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="b">
<stop offset="0" stop-color="#727272" />
<stop offset=".853" stop-color="#313131" />
<stop offset="1" stop-color="#262626" />
</linearGradient>
<linearGradient
id="i"
x1="272.845"
x2="281.599"
y1="-329.637"
y2="-329.637"
gradientTransform="rotate(180 151.611 -148.125)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="j"
x1="23.231"
x2="28.768"
y1="28.786"
y2="28.786"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient id="c">
<stop offset=".404" stop-color="#ff4e61" />
<stop offset="1" stop-color="#c70a30" />
</linearGradient>
<linearGradient
id="k"
x1="15.306"
x2="36.693"
y1="12.515"
y2="12.515"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<radialGradient
id="l"
cx="21.696"
cy="8.568"
r="2.233"
gradientUnits="userSpaceOnUse"
>
<stop offset=".306" stop-color="#fff" stop-opacity=".5" />
<stop offset="1" stop-color="#fff" stop-opacity="0" />
</radialGradient>
<radialGradient
id="m"
cx="21.696"
cy="8.568"
r="1.654"
gradientUnits="userSpaceOnUse"
>
<stop offset=".306" stop-color="#fff" />
<stop offset="1" stop-color="#fff" stop-opacity="0" />
</radialGradient>
<linearGradient id="d">
<stop offset="0" stop-color="#fff" stop-opacity=".2" />
<stop offset="1" stop-color="#fff" stop-opacity=".2" />
</linearGradient>
<radialGradient
id="n"
cx="187.118"
cy="-376.662"
r="2.226"
gradientTransform="rotate(180 101.543 -171.462)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="o"
cx="191.476"
cy="-381.019"
r="2.226"
gradientTransform="rotate(180 101.543 -171.462)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="p"
cx="195.834"
cy="-376.662"
r="2.226"
gradientTransform="rotate(180 101.543 -171.462)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="q"
cx="191.476"
cy="-372.304"
r="2.226"
gradientTransform="rotate(180 101.543 -171.462)"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="r"
x1="393.4"
x2="393.4"
y1="-295.943"
y2="-290.689"
gradientTransform="rotate(180 202.504 -131.921)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#82ea73" />
<stop offset=".832" stop-color="#2fa52f" />
</linearGradient>
<linearGradient
id="s"
x1="389.042"
x2="389.042"
y1="-300.301"
y2="-295.047"
gradientTransform="rotate(180 202.504 -131.921)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="t"
x1="393.4"
x2="393.4"
y1="-304.659"
y2="-299.405"
gradientTransform="rotate(180 202.504 -131.921)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".569" stop-color="#55b4fb" />
<stop offset="1" stop-color="#0d81f3" />
</linearGradient>
<linearGradient id="e">
<stop offset="0" stop-color="#fef328" />
<stop offset=".886" stop-color="#ff7f02" />
</linearGradient>
<linearGradient
id="u"
x1="397.758"
x2="397.758"
y1="-300.301"
y2="-295.047"
gradientTransform="rotate(180 202.504 -131.921)"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<linearGradient
id="v"
x1="361.722"
x2="361.722"
y1="-298.122"
y2="-292.868"
gradientTransform="rotate(180 202.504 -131.921)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".489" stop-color="#bd5dd8" />
<stop offset=".864" stop-color="#9a43bf" />
</linearGradient>
<linearGradient
id="w"
x1="366.08"
x2="366.08"
y1="-302.48"
y2="-297.226"
gradientTransform="rotate(180 202.504 -131.921)"
gradientUnits="userSpaceOnUse"
href="#e"
/>
<radialGradient
id="x"
cx="38.927"
cy="35.217"
r="2.226"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="y"
cx="43.285"
cy="30.859"
r="2.226"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="z"
cx="7.249"
cy="33.038"
r="2.226"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="A"
cx="11.607"
cy="28.68"
r="2.226"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="B"
cx="15.965"
cy="33.038"
r="2.226"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<radialGradient
id="C"
cx="11.607"
cy="37.396"
r="2.226"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<path
fill="#729296"
d="M48.942 29.292v15.634A5.074 5.074 0 0 1 43.87 50H8.132c-2.79 0-5.074-2.283-5.074-5.074V29.293c0-2.79 2.283-5.074 5.073-5.074h35.737c2.79 0 5.074 2.283 5.074 5.073z"
/>
<path
fill="url(#f)"
d="M48.942 26.083v14.61a5.074 5.074 0 0 1-5.073 5.073H8.132c-2.79 0-5.074-2.283-5.074-5.073v-14.61c0-2.79 2.283-5.073 5.073-5.073h35.737c2.79 0 5.074 2.283 5.074 5.073z"
/>
<path
fill="url(#g)"
d="M8.132 45.766h35.737a5.074 5.074 0 0 0 5.073-5.074V26.083c-.322 15.435-.09 14.853-.422 15.928a4.814 4.814 0 0 1-4.362 3.484c-.678.005-36.173 0-36.31 0-1.978-.099-3.779-1.465-4.365-3.485-.249-.8-.2-.7-.287-9.772l-.138-6.155v14.61c0 2.79 2.283 5.073 5.074 5.073z"
/>
<circle cx="26" cy="33.388" r="6.319" fill="url(#h)" />
<circle cx="26" cy="33.388" r="4.304" fill="url(#i)" />
<path
fill="url(#j)"
d="M28.768 21.412v11.979a2.771 2.771 0 0 1-2.769 2.768 2.771 2.771 0 0 1-2.768-2.768V21.412z"
/>
<circle cx="26" cy="12.515" r="10.515" fill="url(#k)" />
<circle cx="21.696" cy="8.568" r="2.233" fill="url(#l)" />
<path
fill="url(#m)"
d="m21.985 8.72.55.688-.688-.55-.151 1.365-.151-1.366-.689.551.551-.688-1.365-.152 1.365-.151-.55-.688.688.55.15-1.365.152 1.366.688-.551-.55.688 1.365.151z"
/>
<path
fill="#209120"
d="M13.833 28.68v.698a2.227 2.227 0 1 1-4.451 0v-.697h.24a2.223 2.223 0 0 1 3.972 0z"
/>
<path
fill="url(#n)"
d="M13.74 33.737a2.226 2.226 0 1 0 2.228-2.225h-.003c.584.003 1.158.249 1.562.664.403.416.62.994.603 1.561-.01 1.155-1.045 1.978-2.165 1.941-1.12.036-2.154-.787-2.164-1.94-.017-.567.2-1.145.603-1.562.404-.415.977-.66 1.561-.665h-.003a2.226 2.226 0 0 0-2.223 2.226z"
/>
<path
fill="url(#o)"
d="M9.381 38.095a2.226 2.226 0 1 0 2.232-2.225h-.006c.584.003 1.158.249 1.562.664.403.416.62.994.603 1.561-.01 1.155-1.045 1.978-2.165 1.941-1.12.036-2.154-.787-2.164-1.94-.017-.567.2-1.145.603-1.562.404-.415.977-.66 1.561-.665h-.005a2.225 2.225 0 0 0-2.22 2.226z"
/>
<path
fill="url(#p)"
d="M5.023 33.737a2.226 2.226 0 1 0 2.23-2.225h-.004c.584.004 1.158.249 1.561.664.404.416.62.994.604 1.561-.01 1.155-1.045 1.978-2.165 1.941-1.12.036-2.154-.787-2.164-1.94-.017-.567.2-1.145.603-1.562.404-.415.977-.66 1.561-.665h-.002a2.226 2.226 0 0 0-2.224 2.226z"
/>
<path
fill="url(#q)"
d="M9.381 29.38a2.226 2.226 0 1 0 2.232-2.226h-.006c.584.004 1.158.249 1.562.664.403.416.62.994.603 1.561-.01 1.155-1.045 1.978-2.165 1.941-1.12.036-2.154-.787-2.164-1.94-.017-.567.2-1.145.603-1.562.404-.415.977-.66 1.561-.664h-.005a2.226 2.226 0 0 0-2.22 2.225z"
/>
<circle cx="11.607" cy="28.68" r="2.226" fill="url(#r)" />
<path
fill="#b9133b"
d="M18.191 33.039v.697a2.227 2.227 0 1 1-4.451 0v-.697h.24a2.223 2.223 0 0 1 3.971 0z"
/>
<circle cx="15.965" cy="33.038" r="2.226" fill="url(#s)" />
<path
fill="#0850ac"
d="M13.833 37.397v.697a2.227 2.227 0 1 1-4.451 0v-.697h.24a2.223 2.223 0 0 1 3.971 0z"
/>
<circle cx="11.607" cy="37.396" r="2.226" fill="url(#t)" />
<path
fill="#f85a03"
d="M9.475 33.039v.697a2.227 2.227 0 1 1-4.45 0v-.697h.239a2.223 2.223 0 0 1 3.972 0z"
/>
<circle cx="7.249" cy="33.038" r="2.226" fill="url(#u)" />
<path
fill="#8335a5"
d="M45.511 30.86v.697a2.227 2.227 0 1 1-4.451 0v-.697h.24a2.223 2.223 0 0 1 3.971 0z"
/>
<circle cx="43.285" cy="30.859" r="2.226" fill="url(#v)" />
<path
fill="#f85a03"
d="M41.153 35.218v.697a2.227 2.227 0 1 1-4.451 0v-.697h.24a2.223 2.223 0 0 1 3.971 0z"
/>
<circle cx="38.927" cy="35.217" r="2.226" fill="url(#w)" />
<path
fill="url(#x)"
d="M41.153 35.217a2.226 2.226 0 1 0-2.229 2.226h.003a2.223 2.223 0 0 1-1.561-.664 2.176 2.176 0 0 1-.604-1.562c.01-1.154 1.046-2.14 2.165-2.103 1.12-.036 2.154.95 2.164 2.103.017.567-.2 1.145-.603 1.562-.403.415-.977.66-1.56.664h.002a2.226 2.226 0 0 0 2.223-2.226z"
/>
<path
fill="url(#y)"
d="M45.51 30.86a2.226 2.226 0 1 0-2.228 2.225h.003a2.223 2.223 0 0 1-1.561-.664 2.176 2.176 0 0 1-.604-1.562c.01-1.154 1.046-2.14 2.165-2.103 1.12-.036 2.154.95 2.164 2.103.017.567-.2 1.145-.603 1.562-.403.415-.977.66-1.56.664h.002a2.226 2.226 0 0 0 2.223-2.226z"
/>
<path
fill="url(#z)"
d="M9.475 33.038a2.226 2.226 0 1 0-2.228 2.226h.002a2.223 2.223 0 0 1-1.561-.664 2.176 2.176 0 0 1-.603-1.562c.01-1.154 1.045-2.14 2.164-2.103 1.12-.036 2.154.95 2.164 2.103.017.567-.199 1.145-.602 1.562-.404.415-.978.66-1.562.664h.003a2.226 2.226 0 0 0 2.223-2.226z"
/>
<path
fill="url(#A)"
d="M13.833 28.68a2.226 2.226 0 1 0-2.231 2.226h.005a2.223 2.223 0 0 1-1.561-.664 2.176 2.176 0 0 1-.604-1.562c.01-1.154 1.046-2.14 2.165-2.103 1.12-.036 2.154.95 2.164 2.103.017.567-.2 1.145-.603 1.562-.403.415-.977.66-1.56.664h.005a2.225 2.225 0 0 0 2.22-2.226z"
/>
<path
fill="url(#B)"
d="M18.191 33.038a2.226 2.226 0 1 0-2.229 2.226h.003a2.223 2.223 0 0 1-1.561-.664 2.176 2.176 0 0 1-.604-1.562c.01-1.154 1.046-2.14 2.165-2.103 1.12-.036 2.154.95 2.164 2.103.017.567-.2 1.145-.603 1.562-.403.415-.977.66-1.56.664h.002a2.226 2.226 0 0 0 2.223-2.226z"
/>
<path
fill="url(#C)"
d="M13.833 37.396a2.226 2.226 0 1 0-2.231 2.226h.005a2.223 2.223 0 0 1-1.561-.664 2.176 2.176 0 0 1-.604-1.562c.01-1.154 1.046-2.14 2.165-2.103 1.12-.036 2.154.95 2.164 2.103.017.567-.2 1.145-.603 1.562-.403.415-.977.66-1.56.664h.005a2.226 2.226 0 0 0 2.22-2.226z"
/>
</svg>
More icons in the same style and category