<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><g fill="none"><circle cx="3.055" cy="19.945" r="1.055" fill="url(#izYpuzc)"/><circle cx="3.055" cy="17.945" r="1.055" fill="url(#iLRcMFd)"/><g filter="url(#i1QNuQd)"><rect width="22" height="17.313" x="3" y="10.688" fill="url(#ikacIub)" rx="8.656"/><rect width="22" height="17.313" x="3" y="10.688" fill="url(#i4lIDec)" rx="8.656"/></g><rect width="22" height="17.313" x="3" y="10.688" fill="url(#igV1GSF)" rx="8.656"/><rect width="22" height="17.313" x="3" y="10.688" fill="url(#iDbi2ed)" rx="8.656"/><g filter="url(#icmia7d)"><path fill="#818cf8" d="M12.43 14.125a.5.5 0 1 0-.642.766zm-.684 9.711a.5.5 0 0 0 .726.687zm.042-8.945c2.545 2.132 2.79 5.951-.042 8.945l.726.687c3.169-3.35 3.007-7.843-.042-10.398z"/></g><g filter="url(#i11JUdm)"><path fill="#818cf8" d="M12.43 14.125a.5.5 0 1 0-.642.766zm-.684 9.711a.5.5 0 0 0 .726.687zm.042-8.945c2.545 2.132 2.79 5.951-.042 8.945l.726.687c3.169-3.35 3.007-7.843-.042-10.398z"/><path fill="url(#iizSplb)" d="M12.43 14.125a.5.5 0 1 0-.642.766zm-.684 9.711a.5.5 0 0 0 .726.687zm.042-8.945c2.545 2.132 2.79 5.951-.042 8.945l.726.687c3.169-3.35 3.007-7.843-.042-10.398z"/><path fill="url(#ivWr4xd)" d="M12.43 14.125a.5.5 0 1 0-.642.766zm-.684 9.711a.5.5 0 0 0 .726.687zm.042-8.945c2.545 2.132 2.79 5.951-.042 8.945l.726.687c3.169-3.35 3.007-7.843-.042-10.398z"/><path fill="url(#iiVx8Fb)" d="M12.43 14.125a.5.5 0 1 0-.642.766zm-.684 9.711a.5.5 0 0 0 .726.687zm.042-8.945c2.545 2.132 2.79 5.951-.042 8.945l.726.687c3.169-3.35 3.007-7.843-.042-10.398z"/></g><circle cx="8.68" cy="17.48" r=".5" fill="url(#iPPjTna)"/><circle cx="8.68" cy="17.48" r=".5" fill="url(#iq99Dke)"/><circle cx="8.68" cy="17.48" r=".5" fill="url(#iUXF3Gd)"/><path fill="url(#ijD1TTb)" d="M25 24.125a4 4 0 0 0 4 4h.219a.5.5 0 0 0 .5-.5v-4.25a4 4 0 0 0-4-4H25z"/><path fill="url(#iyGVs2c)" d="M25 24.125a4 4 0 0 0 4 4h.219a.5.5 0 0 0 .5-.5v-4.25a4 4 0 0 0-4-4H25z"/><path fill="url(#icnBfeu)" d="M25 24.125a4 4 0 0 0 4 4h.219a.5.5 0 0 0 .5-.5v-4.25a4 4 0 0 0-4-4H25z"/><path fill="url(#ifLZyld)" d="M25 24.125a4 4 0 0 0 4 4h.219a.5.5 0 0 0 .5-.5v-4.25a4 4 0 0 0-4-4H25z"/><path fill="url(#iIPE20b)" d="M25 14.625a4 4 0 0 1 4-4h.219a.5.5 0 0 1 .5.5v4.25a4 4 0 0 1-4 4H25z"/><path fill="url(#ialOvpe)" d="M25 14.625a4 4 0 0 1 4-4h.219a.5.5 0 0 1 .5.5v4.25a4 4 0 0 1-4 4H25z"/><path fill="url(#im1FcCc)" d="M25 14.625a4 4 0 0 1 4-4h.219a.5.5 0 0 1 .5.5v4.25a4 4 0 0 1-4 4H25z"/><path fill="url(#inlMXTb)" d="M15.17 28c.977 0 1.768.791 1.768 1.767a.22.22 0 0 1-.221.22h-1.76A1.99 1.99 0 0 1 12.968 28z"/><path fill="url(#iFP6YEe)" d="M15.17 28c.977 0 1.768.791 1.768 1.767a.22.22 0 0 1-.221.22h-1.76A1.99 1.99 0 0 1 12.968 28z"/><path fill="url(#ii3Zy2z)" d="M15.17 28c.977 0 1.768.791 1.768 1.767a.22.22 0 0 1-.221.22h-1.76A1.99 1.99 0 0 1 12.968 28z"/><path fill="url(#iJ3qdyc)" d="M17.75 10.688a4 4 0 0 0 4-4v-.329a.5.5 0 0 0-.5-.5h-5.14a4 4 0 0 0-4 4v.829z"/><path fill="url(#ijMLOHc)" d="M17.75 10.688a4 4 0 0 0 4-4v-.329a.5.5 0 0 0-.5-.5h-5.14a4 4 0 0 0-4 4v.829z"/><path fill="url(#ilYn2Eb)" d="M17.75 10.688a4 4 0 0 0 4-4v-.329a.5.5 0 0 0-.5-.5h-5.14a4 4 0 0 0-4 4v.829z"/><defs><radialGradient id="izYpuzc" cx="0" cy="0" r="1" gradientTransform="rotate(150.684 -.954 10.222)scale(1.1648 1.5939)" gradientUnits="userSpaceOnUse"><stop stop-color="#3AAEE7"/><stop offset="1" stop-color="#45A5E8"/></radialGradient><radialGradient id="iLRcMFd" cx="0" cy="0" r="1" gradientTransform="rotate(150.684 -.693 9.222)scale(1.1648 1.5939)" gradientUnits="userSpaceOnUse"><stop stop-color="#3AAEE7"/><stop offset="1" stop-color="#45A5E8"/></radialGradient><radialGradient id="ikacIub" cx="0" cy="0" r="1" gradientTransform="matrix(11.37503 14.62504 -19.21583 14.94565 11 16)" gradientUnits="userSpaceOnUse"><stop stop-color="#50CAFF"/><stop offset="1" stop-color="#4D7FFF"/></radialGradient><radialGradient id="igV1GSF" cx="0" cy="0" r="1" gradientTransform="matrix(7.5 10.43752 -11.9454 8.58352 5.75 11.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#50CAFF"/><stop offset="1" stop-color="#50CAFF" stop-opacity="0"/></radialGradient><radialGradient id="iDbi2ed" cx="0" cy="0" r="1" gradientTransform="rotate(-144.29 17.701 10.406)scale(26.5554 22.4157)" gradientUnits="userSpaceOnUse"><stop offset=".935" stop-color="#59C0E7" stop-opacity="0"/><stop offset="1" stop-color="#59C0E7"/></radialGradient><radialGradient id="iizSplb" cx="0" cy="0" r="1" gradientTransform="matrix(.92187 -1.17969 .66496 .51964 11.906 24.507)" gradientUnits="userSpaceOnUse"><stop stop-color="#4A8CFF"/><stop offset=".609" stop-color="#4A8CFF" stop-opacity="0"/></radialGradient><radialGradient id="ivWr4xd" cx="0" cy="0" r="1" gradientTransform="matrix(.875 .92969 -.55416 .52156 12.047 14.43)" gradientUnits="userSpaceOnUse"><stop stop-color="#4A8CFF"/><stop offset=".609" stop-color="#4A8CFF" stop-opacity="0"/></radialGradient><radialGradient id="iiVx8Fb" cx="0" cy="0" r="1" gradientTransform="matrix(1.64731 0 0 3.34375 13.196 19.344)" gradientUnits="userSpaceOnUse"><stop offset=".203" stop-color="#4F7FE6"/><stop offset="1" stop-color="#4F7FE6" stop-opacity="0"/></radialGradient><radialGradient id="iPPjTna" cx="0" cy="0" r="1" gradientTransform="matrix(-.40625 .5625 -.5015 -.3622 8.828 17.32)" gradientUnits="userSpaceOnUse"><stop offset=".006" stop-color="#433437"/><stop offset="1" stop-color="#3B2838"/></radialGradient><radialGradient id="iq99Dke" cx="0" cy="0" r="1" gradientTransform="rotate(137.643 1.071 10.395)scale(.35946 .31624)" gradientUnits="userSpaceOnUse"><stop stop-color="#5C5051"/><stop offset="1" stop-color="#5C5051" stop-opacity="0"/></radialGradient><radialGradient id="ijD1TTb" cx="0" cy="0" r="1" gradientTransform="matrix(.125 7.375 -7.4691 .1266 28.375 20.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#46AAFF"/><stop offset="1" stop-color="#368AFF"/></radialGradient><radialGradient id="iyGVs2c" cx="0" cy="0" r="1" gradientTransform="rotate(135.266 12.15 17.095)scale(9.50185 15.6131)" gradientUnits="userSpaceOnUse"><stop offset=".801" stop-color="#3184E6" stop-opacity="0"/><stop offset="1" stop-color="#3184E6"/></radialGradient><radialGradient id="ifLZyld" cx="0" cy="0" r="1" gradientTransform="matrix(0 7 -2.96293 0 29.719 21.125)" gradientUnits="userSpaceOnUse"><stop stop-color="#54BDFF"/><stop offset=".923" stop-color="#54BDFF" stop-opacity="0"/></radialGradient><radialGradient id="iIPE20b" cx="0" cy="0" r="1" gradientTransform="matrix(-2.85113 8.09803 -5.91743 -2.0834 28.726 11.59)" gradientUnits="userSpaceOnUse"><stop stop-color="#46AAFF"/><stop offset="1" stop-color="#368AFF"/></radialGradient><radialGradient id="ialOvpe" cx="0" cy="0" r="1" gradientTransform="matrix(-8.75 -2.3125 3.79981 -14.37766 33.188 16)" gradientUnits="userSpaceOnUse"><stop offset=".726" stop-color="#3184E6" stop-opacity="0"/><stop offset="1" stop-color="#3184E6"/></radialGradient><radialGradient id="im1FcCc" cx="0" cy="0" r="1" gradientTransform="matrix(0 6.3125 -1.16539 0 29.719 11.094)" gradientUnits="userSpaceOnUse"><stop stop-color="#54BDFF"/><stop offset=".923" stop-color="#54BDFF" stop-opacity="0"/></radialGradient><radialGradient id="inlMXTb" cx="0" cy="0" r="1" gradientTransform="matrix(-2.3125 -1 .70957 -1.6409 15.688 29.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#4286FF"/><stop offset="1" stop-color="#3170FF"/></radialGradient><radialGradient id="ii3Zy2z" cx="0" cy="0" r="1" gradientTransform="rotate(-153.997 12.059 12.917)scale(2.85112 1.12711)" gradientUnits="userSpaceOnUse"><stop stop-color="#519DFF"/><stop offset=".969" stop-color="#519DFF" stop-opacity="0"/></radialGradient><radialGradient id="iJ3qdyc" cx="0" cy="0" r="1" gradientTransform="matrix(-8.57831 3.8125 -1.89075 -4.25428 20.688 6.875)" gradientUnits="userSpaceOnUse"><stop stop-color="#46AAFF"/><stop offset="1" stop-color="#2B86D9"/></radialGradient><radialGradient id="ilYn2Eb" cx="0" cy="0" r="1" gradientTransform="matrix(-4.1875 3.12502 -.98416 -1.31877 22.25 5.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#54BDFF"/><stop offset=".644" stop-color="#54BDFF" stop-opacity="0"/></radialGradient><linearGradient id="i4lIDec" x1="14" x2="14" y1="29.375" y2="24.438" gradientUnits="userSpaceOnUse"><stop stop-color="#508BFF"/><stop offset="1" stop-color="#508BFF" stop-opacity="0"/></linearGradient><linearGradient id="iUXF3Gd" x1="8.581" x2="8.238" y1="17.088" y2="16.869" gradientUnits="userSpaceOnUse"><stop stop-color="#5C5051" stop-opacity="0"/><stop offset="1" stop-color="#5C5051"/></linearGradient><linearGradient id="icnBfeu" x1="38.438" x2="25" y1="25.563" y2="25.563" gradientUnits="userSpaceOnUse"><stop offset=".849" stop-color="#3184E6" stop-opacity="0"/><stop offset="1" stop-color="#3184E6"/></linearGradient><linearGradient id="iFP6YEe" x1="15.188" x2="15.219" y1="27.531" y2="28.516" gradientUnits="userSpaceOnUse"><stop stop-color="#0E66FD"/><stop offset="1" stop-color="#0E66FD" stop-opacity="0"/></linearGradient><linearGradient id="ijMLOHc" x1="12.109" x2="12.109" y1="11.469" y2="9.469" gradientUnits="userSpaceOnUse"><stop offset=".109" stop-color="#0A75CC"/><stop offset="1" stop-color="#0A75CC" stop-opacity="0"/></linearGradient><filter id="i1QNuQd" width="22.5" height="17.813" x="2.5" y="10.188" 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 dx="-.5" dy="-.5"/><feGaussianBlur stdDeviation="1"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.364706 0 0 0 0 0.407843 0 0 0 0 1 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_28327_5956"/><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 dx="-.25"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.164706 0 0 0 0 0.411765 0 0 0 0 0.823529 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_28327_5956" result="effect2_innerShadow_28327_5956"/></filter><filter id="icmia7d" width="7.174" height="14.672" x="9.609" y="12.008" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_28327_5956" stdDeviation="1"/></filter><filter id="i11JUdm" width="3.174" height="10.672" x="11.609" y="14.008" 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/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.133333 0 0 0 0 0.439216 0 0 0 0 0.941176 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_28327_5956"/></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. FishIcon.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.