<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><g fill="none"><path fill="url(#iPPDQte)" d="M4.295 19a.25.25 0 0 0-.299.246v3.927a2 2 0 0 0 1.133 1.802l8.867 4.266a4.5 4.5 0 0 0 3.902 0l8.867-4.266a2 2 0 0 0 1.133-1.803v-3.926a.25.25 0 0 0-.299-.246l-11.652 2.305z"/><path fill="url(#i74hdmc)" d="m15.93 11.913l-11.36 5.28a1 1 0 0 0-.578.906v.798a.2.2 0 0 0 .114.18l10.546 5.04a3 3 0 0 0 2.586 0l10.546-5.04a.2.2 0 0 0 .114-.18V18.1a1 1 0 0 0-.579-.907l-11.358-5.279v-.015l-.016.008l-.016-.008z"/><path fill="url(#i74hdmc)" d="m15.93 11.913l-11.36 5.28a1 1 0 0 0-.578.906v.798a.2.2 0 0 0 .114.18l10.546 5.04a3 3 0 0 0 2.586 0l10.546-5.04a.2.2 0 0 0 .114-.18V18.1a1 1 0 0 0-.579-.907l-11.358-5.279v-.015l-.016.008l-.016-.008z"/><path fill="url(#iddz5Bc)" d="m15.93 11.913l-11.36 5.28a1 1 0 0 0-.578.906v.798a.2.2 0 0 0 .114.18l10.546 5.04a3 3 0 0 0 2.586 0l10.546-5.04a.2.2 0 0 0 .114-.18V18.1a1 1 0 0 0-.579-.907l-11.358-5.279v-.015l-.016.008l-.016-.008z"/><path fill="url(#iapjTQI)" d="m15.93 11.913l-11.36 5.28a1 1 0 0 0-.578.906v.798a.2.2 0 0 0 .114.18l10.546 5.04a3 3 0 0 0 2.586 0l10.546-5.04a.2.2 0 0 0 .114-.18V18.1a1 1 0 0 0-.579-.907l-11.358-5.279v-.015l-.016.008l-.016-.008z"/><path fill="url(#i8252sd)" d="m15.93 11.913l-11.36 5.28a1 1 0 0 0-.578.906v.798a.2.2 0 0 0 .114.18l10.546 5.04a3 3 0 0 0 2.586 0l10.546-5.04a.2.2 0 0 0 .114-.18V18.1a1 1 0 0 0-.579-.907l-11.358-5.279v-.015l-.016.008l-.016-.008z"/><g filter="url(#iS4GdFc)"><path stroke="url(#iOM6HTc)" stroke-linecap="round" stroke-width="1.5" d="m17.19 24.21l10.345-5"/></g><g filter="url(#i6KfOde)"><path fill="url(#iobSlec)" d="M15.687 24.34c-4.216-.905-4.763-4.914-4.51-6.805l9.65.161c.043 2.592-1.665 6.095-5.14 6.644"/><path fill="url(#izV7ZFd)" d="M15.687 24.34c-4.216-.905-4.763-4.914-4.51-6.805l9.65.161c.043 2.592-1.665 6.095-5.14 6.644"/></g><g filter="url(#iHsKzGe)"><path fill="url(#iQ8PkKd)" d="M7.942 20.117c-1.181-.285-1.334-1.548-1.263-2.144l2.704.05c.012.817-.467 1.921-1.44 2.094"/></g><path fill="url(#iqviMYb)" d="m4.57 18.101l10.517 4.888a2 2 0 0 0 1.684 0l10.548-4.888a1 1 0 0 0 .47-.454a1 1 0 0 1 .109.452v.798a.2.2 0 0 1-.114.18l-10.546 5.04a3 3 0 0 1-2.586 0l-10.546-5.04a.2.2 0 0 1-.114-.18V18.1c0-.16.038-.315.108-.453a1 1 0 0 0 .47.455"/><g filter="url(#iXbdC2c)"><path fill="#818cf8" d="M11.153 17.356a1 1 0 0 0-.028.222c0 1.135 2.172 2.055 4.852 2.055c2.679 0 4.851-.92 4.851-2.055a1 1 0 0 0-.028-.222a4.908 4.908 0 0 0-9.647 0"/><path fill="url(#iJ1zL5d)" d="M11.153 17.356a1 1 0 0 0-.028.222c0 1.135 2.172 2.055 4.852 2.055c2.679 0 4.851-.92 4.851-2.055a1 1 0 0 0-.028-.222a4.908 4.908 0 0 0-9.647 0"/><path fill="url(#i15qv2c)" d="M11.153 17.356a1 1 0 0 0-.028.222c0 1.135 2.172 2.055 4.852 2.055c2.679 0 4.851-.92 4.851-2.055a1 1 0 0 0-.028-.222a4.908 4.908 0 0 0-9.647 0"/><path fill="url(#iYtCbBd)" d="M11.153 17.356a1 1 0 0 0-.028.222c0 1.135 2.172 2.055 4.852 2.055c2.679 0 4.851-.92 4.851-2.055a1 1 0 0 0-.028-.222a4.908 4.908 0 0 0-9.647 0"/><path fill="url(#inCgtva)" d="M11.153 17.356a1 1 0 0 0-.028.222c0 1.135 2.172 2.055 4.852 2.055c2.679 0 4.851-.92 4.851-2.055a1 1 0 0 0-.028-.222a4.908 4.908 0 0 0-9.647 0"/></g><path fill="url(#iIq4K7b)" d="M11.153 17.356a1 1 0 0 0-.028.222c0 1.135 2.172 2.055 4.852 2.055c2.679 0 4.851-.92 4.851-2.055a1 1 0 0 0-.028-.222a4.908 4.908 0 0 0-9.647 0"/><path fill="url(#iaROPEe)" d="M11.153 17.356a1 1 0 0 0-.028.222c0 1.135 2.172 2.055 4.852 2.055c2.679 0 4.851-.92 4.851-2.055a1 1 0 0 0-.028-.222a4.908 4.908 0 0 0-9.647 0"/><g filter="url(#ib975Bc)"><path fill="#818cf8" d="M7.988 17.09c.77 0 1.395.413 1.395 1.144c0 .434-.625.621-1.395.621s-1.394-.168-1.394-.62c0-.732.624-1.145 1.394-1.145"/></g><path fill="url(#i9xIEdc)" d="M7.988 16.977c.732 0 1.324.413 1.324 1.144c0 .434-.592.621-1.324.621c-.731 0-1.324-.168-1.324-.62c0-.732.593-1.145 1.324-1.145"/><path fill="url(#igRH75c)" d="M7.988 16.977c.732 0 1.324.413 1.324 1.144c0 .434-.592.621-1.324.621c-.731 0-1.324-.168-1.324-.62c0-.732.593-1.145 1.324-1.145"/><path fill="url(#iywW9cd)" d="M7.988 16.977c.732 0 1.324.413 1.324 1.144c0 .434-.592.621-1.324.621c-.731 0-1.324-.168-1.324-.62c0-.732.593-1.145 1.324-1.145"/><path fill="url(#itFCuIb)" d="M14.945 9.86a.992.992 0 1 1 1.985 0v4.148c0 .548-.445.719-.993.719c-.547 0-.992-.171-.992-.72z"/><path fill="url(#idZze5b)" d="M14.945 9.86a.992.992 0 1 1 1.985 0v4.148c0 .548-.445.719-.993.719c-.547 0-.992-.171-.992-.72z"/><path fill="url(#iJmtene)" d="M14.945 9.86a.992.992 0 1 1 1.985 0v4.148c0 .548-.445.719-.993.719c-.547 0-.992-.171-.992-.72z"/><circle cx="15.976" cy="6.398" r="4.578" fill="url(#ivHFQYb)"/><circle cx="15.976" cy="6.398" r="4.578" fill="url(#iFP5ZJe)"/><circle cx="15.976" cy="6.398" r="4.578" fill="url(#iMjzXne)"/><g filter="url(#iI4XUDe)"><path stroke="#818cf8" stroke-linecap="round" stroke-width="1.5" d="m27.535 17.868l-10.813 5.068a1.9 1.9 0 0 1-.746.134"/></g><defs><radialGradient id="i8252sd" cx="0" cy="0" r="1" gradientTransform="matrix(0 5.65532 -9.54334 0 16.365 11.347)" gradientUnits="userSpaceOnUse"><stop stop-color="#6D6F9E"/><stop offset="1" stop-color="#6D6F9E" stop-opacity="0"/></radialGradient><radialGradient id="izV7ZFd" cx="0" cy="0" r="1" gradientTransform="scale(5.2725 2.375)rotate(90 -2.3 5.33)" gradientUnits="userSpaceOnUse"><stop offset=".329" stop-color="#281E45"/><stop offset="1" stop-color="#281E45" stop-opacity="0"/></radialGradient><radialGradient id="iJ1zL5d" cx="0" cy="0" r="1" gradientTransform="rotate(94.126 2.003 14.32)scale(6.29757 12.0208)" gradientUnits="userSpaceOnUse"><stop offset=".647" stop-color="#442A5D" stop-opacity="0"/><stop offset="1" stop-color="#442A5D"/></radialGradient><radialGradient id="i15qv2c" cx="0" cy="0" r="1" gradientTransform="matrix(-4.09975 2.25628 -1.4669 -2.66543 20.076 15.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#6F5A85"/><stop offset="1" stop-color="#6F5A85" stop-opacity="0"/></radialGradient><radialGradient id="iYtCbBd" cx="0" cy="0" r="1" gradientTransform="rotate(101.741 .99 11.9)scale(5.63189 3.58864)" gradientUnits="userSpaceOnUse"><stop stop-color="#4A3947"/><stop offset="1" stop-color="#4A3947" stop-opacity="0"/></radialGradient><radialGradient id="inCgtva" cx="0" cy="0" r="1" gradientTransform="matrix(3.61718 -3.9574 4.05244 3.70405 15.779 18.633)" gradientUnits="userSpaceOnUse"><stop offset=".942" stop-color="#766F8B" stop-opacity=".082"/><stop offset=".991" stop-color="#766F8B"/></radialGradient><radialGradient id="iIq4K7b" cx="0" cy="0" r="1" gradientTransform="rotate(-44.236 27.446 -4.512)scale(4.97229 4.86741)" gradientUnits="userSpaceOnUse"><stop stop-color="#422E3D"/><stop offset="1" stop-color="#422E3D" stop-opacity="0"/></radialGradient><radialGradient id="iaROPEe" cx="0" cy="0" r="1" gradientTransform="rotate(-139.07 11.991 6.148)scale(5.91484 7.01095)" gradientUnits="userSpaceOnUse"><stop offset=".934" stop-color="#50464D" stop-opacity="0"/><stop offset="1" stop-color="#50464D"/></radialGradient><radialGradient id="i9xIEdc" cx="0" cy="0" r="1" gradientTransform="matrix(-2.15625 0 0 -2.1875 9.008 18.102)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF3389"/><stop offset="1" stop-color="#E13B63"/></radialGradient><radialGradient id="igRH75c" cx="0" cy="0" r="1" gradientTransform="matrix(-1.10733 .2291 -.11267 -.54459 8.87 18.162)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF5EA3"/><stop offset="1" stop-color="#FF5EA3" stop-opacity="0"/></radialGradient><radialGradient id="iywW9cd" cx="0" cy="0" r="1" gradientTransform="rotate(166.189 3.227 9.452)scale(1.93083 1.90247)" gradientUnits="userSpaceOnUse"><stop offset=".677" stop-color="#C52754" stop-opacity="0"/><stop offset="1" stop-color="#C52754"/></radialGradient><radialGradient id="idZze5b" cx="0" cy="0" r="1" gradientTransform="matrix(1.71905 0 0 .9427 16.083 10.342)" gradientUnits="userSpaceOnUse"><stop stop-color="#BD7CD0"/><stop offset="1" stop-color="#BD7CD0" stop-opacity="0"/></radialGradient><radialGradient id="iJmtene" cx="0" cy="0" r="1" gradientTransform="matrix(-1.73694 2.66813 -1.6878 -1.09875 15.403 9.966)" gradientUnits="userSpaceOnUse"><stop offset=".18" stop-color="#B87EBA"/><stop offset="1" stop-color="#BD7CD0" stop-opacity="0"/></radialGradient><radialGradient id="ivHFQYb" cx="0" cy="0" r="1" gradientTransform="rotate(142.722 8.645 5.417)scale(5.26263)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF78AD"/><stop offset="1" stop-color="#FB426F"/></radialGradient><radialGradient id="iFP5ZJe" cx="0" cy="0" r="1" gradientTransform="rotate(-180 9.309 3.2)scale(7.21875)" gradientUnits="userSpaceOnUse"><stop offset=".543" stop-color="#CC515D" stop-opacity="0"/><stop offset="1" stop-color="#CC515D"/><stop offset="1" stop-color="#CC515D"/></radialGradient><radialGradient id="iMjzXne" cx="0" cy="0" r="1" gradientTransform="rotate(90 6.023 9.953)scale(7.375)" gradientUnits="userSpaceOnUse"><stop offset=".807" stop-color="#B8276B" stop-opacity="0"/><stop offset="1" stop-color="#B8276B"/></radialGradient><linearGradient id="iPPDQte" x1="5.375" x2="26.472" y1="24.227" y2="24.227" gradientUnits="userSpaceOnUse"><stop stop-color="#2F2137"/><stop offset=".448" stop-color="#38224A"/><stop offset=".568" stop-color="#5D3E7D"/></linearGradient><linearGradient id="i74hdmc" x1="26.242" x2="3.305" y1="17.492" y2="17.492" gradientUnits="userSpaceOnUse"><stop stop-color="#615D8D"/><stop offset="1" stop-color="#5E5681"/></linearGradient><linearGradient id="iddz5Bc" x1="9.984" x2="10.148" y1="20.679" y2="20.343" gradientUnits="userSpaceOnUse"><stop offset=".269" stop-color="#4F3A84"/><stop offset="1" stop-color="#534177" stop-opacity="0"/></linearGradient><linearGradient id="iapjTQI" x1="21.321" x2="21.091" y1="20.999" y2="20.515" gradientUnits="userSpaceOnUse"><stop offset=".338" stop-color="#6152A2"/><stop offset="1" stop-color="#5F5887" stop-opacity="0"/></linearGradient><linearGradient id="iOM6HTc" x1="26.523" x2="17.852" y1="19.898" y2="24.211" gradientUnits="userSpaceOnUse"><stop offset=".896" stop-color="#69597D"/><stop offset="1" stop-color="#69597D" stop-opacity="0"/></linearGradient><linearGradient id="iobSlec" x1="15.976" x2="15.976" y1="18.492" y2="24.34" gradientUnits="userSpaceOnUse"><stop stop-color="#4D4277"/><stop offset="1" stop-color="#4D4277" stop-opacity="0"/></linearGradient><linearGradient id="iQ8PkKd" x1="8.023" x2="8.023" y1="17.508" y2="21.206" gradientUnits="userSpaceOnUse"><stop stop-color="#4D4277"/><stop offset="1" stop-color="#4D4277" stop-opacity="0"/></linearGradient><linearGradient id="iqviMYb" x1="26.336" x2="3.189" y1="21.119" y2="21.119" gradientUnits="userSpaceOnUse"><stop offset=".431" stop-color="#6052A1"/><stop offset=".464" stop-color="#4E3A83"/></linearGradient><linearGradient id="itFCuIb" x1="15.273" x2="17.086" y1="12.961" y2="12.961" gradientUnits="userSpaceOnUse"><stop stop-color="#DDB7F2"/><stop offset="1" stop-color="#F8EBFF"/></linearGradient><filter id="iS4GdFc" width="10.944" height="5.6" x="16.891" y="18.911" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_3570" stdDeviation=".1"/></filter><filter id="i6KfOde" width="11.203" height="8.305" x="10.375" y="16.785" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_3570" stdDeviation=".375"/></filter><filter id="iHsKzGe" width="3.219" height="2.645" x="6.414" y="17.723" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_3570" stdDeviation=".125"/></filter><filter id="iXbdC2c" width="9.703" height="6.381" x="11.125" y="13.252" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.1"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.14902 0 0 0 0 0.0862745 0 0 0 0 0.235294 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_3570"/></filter><filter id="ib975Bc" width="3.089" height="2.066" x="6.444" y="16.94" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_3570" stdDeviation=".075"/></filter><filter id="iI4XUDe" width="11.958" height="5.604" x="15.777" y="17.668" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_3570" stdDeviation=".05"/></filter></defs></g></svg>Icons in Action
WEB APPLICATION HEADER & NAVIGATION
my-app.com/dashboard
Dashboard
Analytics
Settings
Overview Dashboard
PROGRESS STEPPER
3
BUTTON UI ACTIONS
SCALABILITY & CLARITY
12px
16px
24px
32px
48px
“
Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.
IconSearch Presets
Frequently Asked Questions
Q.How do I use this icon in my React/Next.js project?
You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. JoystickIcon.tsx) to avoid installing any npm packages.
Q.Is this icon free for commercial use?
Yes. This icon is published under the open-source **MIT** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.
Q.What is the "Download SVG without fill color" toggle?
Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.