<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><g fill="none"><rect width="13.855" height="4.801" x="17.969" y="10.906" fill="#818cf8" rx="2.4" transform="rotate(-45 17.969 10.906)"/><rect width="13.855" height="4.801" x="17.969" y="10.906" fill="url(#iYPke4n)" rx="2.4" transform="rotate(-45 17.969 10.906)"/><rect width="13.855" height="4.801" x="17.969" y="10.906" fill="url(#inymKfe)" rx="2.4" transform="rotate(-45 17.969 10.906)"/><rect width="13.855" height="4.801" x="17.969" y="10.906" fill="url(#iJy9EQb)" rx="2.4" transform="rotate(-45 17.969 10.906)"/><rect width="13.855" height="4.801" x="17.969" y="10.906" fill="url(#iffmqIb)" rx="2.4" transform="rotate(-45 17.969 10.906)"/><g filter="url(#iyYtSQd)"><path fill="url(#iLCXDkb)" d="M27.856 3.919h.699v6.197h-.699z" transform="rotate(45 27.856 3.919)"/></g><path fill="url(#ijKGTFn)" d="M19.666 9.209a2.4 2.4 0 1 0 3.395 3.395l3.037-3.038l-3.395-3.394z"/><g filter="url(#i7wKcIe)"><path fill="#818cf8" d="M2.75 22.484a1.613 1.613 0 0 1 0-2.28l3.11-3.11a1.613 1.613 0 0 1 2.28 2.281l-3.109 3.11c-.63.63-1.651.63-2.281 0"/><path fill="url(#ipYop4b)" d="M2.75 22.484a1.613 1.613 0 0 1 0-2.28l3.11-3.11a1.613 1.613 0 0 1 2.28 2.281l-3.109 3.11c-.63.63-1.651.63-2.281 0"/></g><g filter="url(#i2jbFjc)"><path fill="#818cf8" d="M6.23 25.965a1.613 1.613 0 0 1 0-2.281l3.11-3.11a1.613 1.613 0 1 1 2.281 2.281l-3.11 3.11c-.63.63-1.65.63-2.28 0"/><path fill="url(#iZU008W)" d="M6.23 25.965a1.613 1.613 0 0 1 0-2.281l3.11-3.11a1.613 1.613 0 1 1 2.281 2.281l-3.11 3.11c-.63.63-1.65.63-2.28 0"/></g><g filter="url(#iXihXZA)"><path fill="#818cf8" d="M9.687 29.453a1.613 1.613 0 0 1 0-2.281l3.11-3.11a1.613 1.613 0 1 1 2.281 2.282l-3.11 3.11c-.63.63-1.65.63-2.28 0"/><path fill="url(#iRneocd)" d="M9.687 29.453a1.613 1.613 0 0 1 0-2.281l3.11-3.11a1.613 1.613 0 1 1 2.281 2.282l-3.11 3.11c-.63.63-1.65.63-2.28 0"/></g><path fill="url(#iUr1FSd)" d="M23.425 21.112A8.734 8.734 0 0 0 11.091 8.778l-.443.398L22.031 22.39z"/><path fill="url(#ioos6lb)" d="M23.425 21.112A8.734 8.734 0 0 0 11.091 8.778l-.443.398L22.031 22.39z"/><path fill="url(#iE9tRmO)" d="M23.425 21.112A8.734 8.734 0 0 0 11.091 8.778l-.443.398L22.031 22.39z"/><path fill="url(#iGynaUd)" d="M23.425 21.112A8.734 8.734 0 0 0 11.091 8.778l-.443.398L22.031 22.39z"/><path fill="url(#imQM1Rd)" d="M23.425 21.112A8.734 8.734 0 0 0 11.091 8.778l-.443.398L22.031 22.39z"/><g filter="url(#isROXXq)"><path fill="url(#iQn7Iwc)" d="M6.957 9.176a3.204 3.204 0 0 1 4.532 0l11.933 11.933a3.204 3.204 0 1 1-4.532 4.531L6.957 13.707a3.204 3.204 0 0 1 0-4.531"/></g><path fill="url(#iMUAyTd)" d="M6.957 9.176a3.204 3.204 0 0 1 4.532 0l11.933 11.933a3.204 3.204 0 1 1-4.532 4.531L6.957 13.707a3.204 3.204 0 0 1 0-4.531"/><path fill="url(#ihGoWKc)" d="M6.957 9.176a3.204 3.204 0 0 1 4.532 0l11.933 11.933a3.204 3.204 0 1 1-4.532 4.531L6.957 13.707a3.204 3.204 0 0 1 0-4.531"/><g filter="url(#iwdr6td)"><rect width="18.913" height="1.609" x="9.882" y="9.333" fill="#818cf8" rx=".805" transform="rotate(45 9.882 9.333)"/></g><g filter="url(#i6ITl2d)"><rect width="1.05" height="5.42" x="7.391" y="17.303" fill="#818cf8" rx=".525" transform="rotate(45.861 7.391 17.303)"/></g><g filter="url(#iYv6w4k)"><rect width="1.05" height="5.42" x="10.794" y="20.833" fill="#818cf8" rx=".525" transform="rotate(45.861 10.794 20.833)"/></g><g filter="url(#iQN2BSd)"><rect width="1.05" height="5.42" x="14.369" y="24.315" fill="#818cf8" rx=".525" transform="rotate(45.861 14.369 24.315)"/></g><defs><linearGradient id="iYPke4n" x1="27.139" x2="27.139" y1="16.143" y2="14.199" gradientUnits="userSpaceOnUse"><stop stop-color="#A6A1AD"/><stop offset="1" stop-color="#BBB7C0" stop-opacity="0"/></linearGradient><linearGradient id="inymKfe" x1="26.542" x2="26.476" y1="10.508" y2="13.315" gradientUnits="userSpaceOnUse"><stop stop-color="#9F9F9F"/><stop offset="1" stop-color="#B4B3B5" stop-opacity="0"/></linearGradient><linearGradient id="iJy9EQb" x1="32.265" x2="29.57" y1="13.447" y2="13.447" gradientUnits="userSpaceOnUse"><stop stop-color="#CCC"/><stop offset="1" stop-color="#CCC" stop-opacity="0"/></linearGradient><linearGradient id="iLCXDkb" x1="29.133" x2="29.275" y1="9.536" y2="3.497" gradientUnits="userSpaceOnUse"><stop stop-color="#CFCFCF"/><stop offset="1" stop-color="#CFCFCF" stop-opacity="0"/></linearGradient><linearGradient id="ipYop4b" x1="2.75" x2="4.156" y1="22.75" y2="21.281" gradientUnits="userSpaceOnUse"><stop stop-color="#354FD8"/><stop offset="1" stop-color="#354FD8" stop-opacity="0"/></linearGradient><linearGradient id="iZU008W" x1="6.23" x2="7.637" y1="26.23" y2="24.762" gradientUnits="userSpaceOnUse"><stop stop-color="#354FD8"/><stop offset="1" stop-color="#354FD8" stop-opacity="0"/></linearGradient><linearGradient id="iRneocd" x1="9.687" x2="11.094" y1="29.719" y2="28.25" gradientUnits="userSpaceOnUse"><stop stop-color="#354FD8"/><stop offset="1" stop-color="#354FD8" stop-opacity="0"/></linearGradient><linearGradient id="imQM1Rd" x1="17.312" x2="18.152" y1="16.063" y2="15.219" gradientUnits="userSpaceOnUse"><stop offset=".292" stop-color="#B5B5B5"/><stop offset="1" stop-color="#B5B5B5" stop-opacity="0"/></linearGradient><linearGradient id="iQn7Iwc" x1="16.594" x2="12.156" y1="15.25" y2="19.438" gradientUnits="userSpaceOnUse"><stop stop-color="#CECECE"/><stop offset="1" stop-color="#A7A0B0"/></linearGradient><linearGradient id="iMUAyTd" x1="18.515" x2="15.987" y1="15.936" y2="18.531" gradientUnits="userSpaceOnUse"><stop offset=".031" stop-color="#D3D2D3"/><stop offset="1" stop-color="#C1BEC4" stop-opacity="0"/></linearGradient><linearGradient id="ihGoWKc" x1="5.841" x2="8.635" y1="8.917" y2="11.811" gradientUnits="userSpaceOnUse"><stop offset=".03" stop-color="#A6A6A7"/><stop offset="1" stop-color="#A6A6A7" stop-opacity="0"/></linearGradient><filter id="iyYtSQd" width="5.876" height="5.876" x="22.974" y="3.419" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_25869" stdDeviation=".25"/></filter><filter id="i7wKcIe" width="6.336" height="6.336" x="2.277" y="16.621" 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=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.2 0 0 0 0 0.352941 0 0 0 0 0.858824 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_25869"/></filter><filter id="i2jbFjc" width="6.336" height="6.336" x="5.758" y="20.102" 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=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.2 0 0 0 0 0.352941 0 0 0 0 0.858824 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_25869"/></filter><filter id="iXihXZA" width="6.336" height="6.336" x="9.215" y="23.59" 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=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.2 0 0 0 0 0.352941 0 0 0 0 0.858824 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_25869"/></filter><filter id="isROXXq" width="18.342" height="18.842" x="6.019" y="7.737" 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="-.5"/><feGaussianBlur stdDeviation=".75"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.552941 0 0 0 0 0.482353 0 0 0 0 0.666667 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_25869"/></filter><filter id="iwdr6td" width="16.845" height="16.845" x="7.578" y="8.166" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_25869" stdDeviation=".75"/></filter><filter id="i6ITl2d" width="5.686" height="5.594" x="2.969" y="16.77" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_25869" stdDeviation=".375"/></filter><filter id="iYv6w4k" width="5.686" height="5.594" x="6.372" y="20.301" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_25869" stdDeviation=".375"/></filter><filter id="iQN2BSd" width="5.686" height="5.594" x="9.946" y="23.782" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_25869" stdDeviation=".375"/></filter><radialGradient id="iffmqIb" cx="0" cy="0" r="1" gradientTransform="matrix(2.58536 1.10486 -.59281 1.38718 30.564 13.69)" gradientUnits="userSpaceOnUse"><stop stop-color="#DDDCDE"/><stop offset="1" stop-color="#CCCBCC" stop-opacity="0"/></radialGradient><radialGradient id="ijKGTFn" cx="0" cy="0" r="1" gradientTransform="rotate(135 10.28 9.036)scale(3.93328 2.86477)" gradientUnits="userSpaceOnUse"><stop offset=".247" stop-color="#979697"/><stop offset="1" stop-color="#7B7581"/></radialGradient><radialGradient id="iUr1FSd" cx="0" cy="0" r="1" gradientTransform="rotate(135.562 8.908 10.433)scale(9.5979 10.8918)" gradientUnits="userSpaceOnUse"><stop offset=".167" stop-color="#D6D6D7"/><stop offset="1" stop-color="#AEAEAE"/></radialGradient><radialGradient id="ioos6lb" cx="0" cy="0" r="1" gradientTransform="matrix(-7.75111 -7.88429 6.54322 -6.4327 20.079 15.97)" gradientUnits="userSpaceOnUse"><stop offset=".795" stop-color="#B0B0B0" stop-opacity="0"/><stop offset="1" stop-color="#A1A1A1"/></radialGradient><radialGradient id="iE9tRmO" cx="0" cy="0" r="1" gradientTransform="matrix(3.8257 12.80773 -16.42223 4.90536 19.546 8.85)" gradientUnits="userSpaceOnUse"><stop offset=".718" stop-color="#ACA3B7" stop-opacity="0"/><stop offset=".952" stop-color="#ACA3B7"/></radialGradient><radialGradient id="iGynaUd" cx="0" cy="0" r="1" gradientTransform="matrix(4.92348 -2.89036 1.97299 3.36082 19.247 14.469)" gradientUnits="userSpaceOnUse"><stop stop-color="#E0DFE1"/><stop offset="1" stop-color="#E0DFE1" stop-opacity="0"/></radialGradient></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. ShowerIcon.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.