<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><g fill="none"><g filter="url(#iP3lrBd)"><path fill="url(#iPKiGeb)" d="M7.39 27.023a3 3 0 0 0 3 3h16.852V4.977a3 3 0 0 0-3-3H4.758v.001l.086-.001A2.547 2.547 0 0 1 7.39 4.523z"/><path fill="url(#iSS0qbc)" d="M7.39 27.023a3 3 0 0 0 3 3h16.852V4.977a3 3 0 0 0-3-3H4.758v.001l.086-.001A2.547 2.547 0 0 1 7.39 4.523z"/><path fill="url(#i129TId)" d="M7.39 27.023a3 3 0 0 0 3 3h16.852V4.977a3 3 0 0 0-3-3H4.758v.001l.086-.001A2.547 2.547 0 0 1 7.39 4.523z"/><path fill="url(#iF1ZRUG)" d="M7.39 27.023a3 3 0 0 0 3 3h16.852V4.977a3 3 0 0 0-3-3H4.758v.001l.086-.001A2.547 2.547 0 0 1 7.39 4.523z"/><path fill="url(#iOykuod)" d="M7.39 27.023a3 3 0 0 0 3 3h16.852V4.977a3 3 0 0 0-3-3H4.758v.001l.086-.001A2.547 2.547 0 0 1 7.39 4.523z"/></g><g filter="url(#iExxSfE)"><path fill="url(#iuAjHbd)" d="M4.844 1.977a2.547 2.547 0 0 0-2.547 2.546v.705a.1.1 0 0 0 .1.1H7.39v-.805a2.547 2.547 0 0 0-2.547-2.546"/></g><g filter="url(#iEvI6ld)"><path fill="url(#iT4kQMb)" d="M14.258 27.164a.25.25 0 0 0-.25.25v.012h-.004c-.073 1.591-1.36 2.597-2.969 2.597h16.482a2.756 2.756 0 0 0 2.756-2.756a.103.103 0 0 0-.103-.103z"/><path fill="url(#i5pmxBe)" d="M14.258 27.164a.25.25 0 0 0-.25.25v.012h-.004c-.073 1.591-1.36 2.597-2.969 2.597h16.482a2.756 2.756 0 0 0 2.756-2.756a.103.103 0 0 0-.103-.103z"/></g><g filter="url(#iAVZ6re)"><rect width="13.906" height="1.012" x="10.25" y="12.113" fill="url(#i5KrevG)" rx=".506"/></g><g filter="url(#ihWX77L)"><rect width="13.906" height="1.012" x="10.25" y="15.105" fill="url(#i1CdVld)" rx=".506"/></g><g filter="url(#iWm8A1G)"><rect width="13.906" height="1.012" x="10.25" y="18.098" fill="url(#i3BDk2c)" rx=".506"/></g><g filter="url(#is2GH4Z)"><rect width="9.008" height="1.012" x="10.25" y="21.09" fill="url(#ihWENIe)" rx=".506"/></g><defs><linearGradient id="iPKiGeb" x1="8.997" x2="24.711" y1="16" y2="21.43" gradientUnits="userSpaceOnUse"><stop stop-color="#FFBF82"/><stop offset=".736" stop-color="#FFD8A3"/></linearGradient><linearGradient id="iSS0qbc" x1="16" x2="16" y1="1.977" y2="8.68" gradientUnits="userSpaceOnUse"><stop stop-color="#FFD27C"/><stop offset="1" stop-color="#FFD27C" stop-opacity="0"/></linearGradient><linearGradient id="i129TId" x1="16" x2="16" y1="1.68" y2="3.43" gradientUnits="userSpaceOnUse"><stop stop-color="#F9B76C"/><stop offset="1" stop-color="#FFC573" stop-opacity="0"/></linearGradient><linearGradient id="iT4kQMb" x1="20.654" x2="20.654" y1="27.164" y2="30.023" gradientUnits="userSpaceOnUse"><stop stop-color="#E58F4F"/><stop offset="1" stop-color="#EE9880"/></linearGradient><linearGradient id="i5pmxBe" x1="18.461" x2="18.461" y1="30.023" y2="29.117" gradientUnits="userSpaceOnUse"><stop stop-color="#E07E98"/><stop offset="1" stop-color="#E07E98" stop-opacity="0"/></linearGradient><linearGradient id="i5KrevG" x1="10.43" x2="22.961" y1="12.898" y2="12.898" gradientUnits="userSpaceOnUse"><stop stop-color="#D37E48"/><stop offset="1" stop-color="#DE8650"/></linearGradient><linearGradient id="i1CdVld" x1="10.43" x2="22.961" y1="15.891" y2="15.891" gradientUnits="userSpaceOnUse"><stop stop-color="#D37E48"/><stop offset="1" stop-color="#DE8650"/></linearGradient><linearGradient id="i3BDk2c" x1="10.43" x2="22.961" y1="18.883" y2="18.883" gradientUnits="userSpaceOnUse"><stop stop-color="#D37E48"/><stop offset="1" stop-color="#DE8650"/></linearGradient><linearGradient id="ihWENIe" x1="10.366" x2="18.483" y1="21.875" y2="21.875" gradientUnits="userSpaceOnUse"><stop stop-color="#D37E48"/><stop offset="1" stop-color="#DE8650"/></linearGradient><filter id="iP3lrBd" width="22.684" height="28.147" x="4.658" y="1.877" 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="-.1"/><feGaussianBlur stdDeviation=".125"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.996078 0 0 0 0 0.917647 0 0 0 0 0.592157 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21056"/><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=".1" dy="-.1"/><feGaussianBlur stdDeviation=".125"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.866667 0 0 0 0 0.627451 0 0 0 0 0.498039 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_21056" result="effect2_innerShadow_18_21056"/></filter><filter id="iExxSfE" width="5.144" height="3.402" x="2.297" y="1.977" 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=".05" dy=".05"/><feGaussianBlur stdDeviation=".05"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.807843 0 0 0 0 0.494118 0 0 0 0 0.411765 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21056"/></filter><filter id="iEvI6ld" width="19.338" height="2.859" x="11.035" y="27.164" 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=".1"/><feGaussianBlur stdDeviation=".1"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.72549 0 0 0 0 0.427451 0 0 0 0 0.203922 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21056"/></filter><filter id="iAVZ6re" width="14.006" height="1.112" x="10.2" y="12.063" 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=".05" dy="-.05"/><feGaussianBlur stdDeviation=".025"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.721569 0 0 0 0 0.384314 0 0 0 0 0.262745 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21056"/><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="-.05" dy=".05"/><feGaussianBlur stdDeviation=".025"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.972549 0 0 0 0 0.635294 0 0 0 0 0.380392 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_21056" result="effect2_innerShadow_18_21056"/></filter><filter id="ihWX77L" width="14.006" height="1.112" x="10.2" y="15.056" 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=".05" dy="-.05"/><feGaussianBlur stdDeviation=".025"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.721569 0 0 0 0 0.384314 0 0 0 0 0.262745 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21056"/><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="-.05" dy=".05"/><feGaussianBlur stdDeviation=".025"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.972549 0 0 0 0 0.635294 0 0 0 0 0.380392 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_21056" result="effect2_innerShadow_18_21056"/></filter><filter id="iWm8A1G" width="14.006" height="1.112" x="10.2" y="18.048" 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=".05" dy="-.05"/><feGaussianBlur stdDeviation=".025"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.721569 0 0 0 0 0.384314 0 0 0 0 0.262745 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21056"/><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="-.05" dy=".05"/><feGaussianBlur stdDeviation=".025"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.972549 0 0 0 0 0.635294 0 0 0 0 0.380392 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_21056" result="effect2_innerShadow_18_21056"/></filter><filter id="is2GH4Z" width="9.108" height="1.112" x="10.2" y="21.04" 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=".05" dy="-.05"/><feGaussianBlur stdDeviation=".025"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.721569 0 0 0 0 0.384314 0 0 0 0 0.262745 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21056"/><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="-.05" dy=".05"/><feGaussianBlur stdDeviation=".025"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.972549 0 0 0 0 0.635294 0 0 0 0 0.380392 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_21056" result="effect2_innerShadow_18_21056"/></filter><radialGradient id="iF1ZRUG" cx="0" cy="0" r="1" gradientTransform="matrix(0 -3.12594 5.10625 0 11.767 30.023)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDA8D"/><stop offset="1" stop-color="#FFDA8D" stop-opacity="0"/></radialGradient><radialGradient id="iOykuod" cx="0" cy="0" r="1" gradientTransform="matrix(0 -2.76952 20.9414 0 21.873 27.87)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFDD93"/><stop offset="1" stop-color="#FFDD93" stop-opacity="0"/></radialGradient><radialGradient id="iuAjHbd" cx="0" cy="0" r="1" gradientTransform="matrix(3.90625 0 0 5.93677 2.555 5.328)" gradientUnits="userSpaceOnUse"><stop stop-color="#EB9160"/><stop offset="1" stop-color="#C36241"/></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. ScrollIcon.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.