<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(#iFIBuPb)"><path fill="url(#ijgguqH)" d="M2.023 11.531a2.5 2.5 0 0 1 2.5-2.5h22.954a2.5 2.5 0 0 1 2.5 2.5v15.922a2.5 2.5 0 0 1-2.5 2.5H4.523a2.5 2.5 0 0 1-2.5-2.5z"/><path fill="url(#ik56B9c)" d="M2.023 11.531a2.5 2.5 0 0 1 2.5-2.5h22.954a2.5 2.5 0 0 1 2.5 2.5v15.922a2.5 2.5 0 0 1-2.5 2.5H4.523a2.5 2.5 0 0 1-2.5-2.5z"/></g><g stroke-width="1.5" filter="url(#ipkfL7c)"><path stroke="url(#itWTR7c)" d="M4.273 12.056a.9.9 0 0 1 .9-.9h21.794a.9.9 0 0 1 .9.9v9.888a.9.9 0 0 1-.9.9H5.173a.9.9 0 0 1-.9-.9z"/><path stroke="url(#iIwgTNe)" d="M4.273 12.056a.9.9 0 0 1 .9-.9h21.794a.9.9 0 0 1 .9.9v9.888a.9.9 0 0 1-.9.9H5.173a.9.9 0 0 1-.9-.9z"/><path stroke="url(#iXApqKd)" d="M4.273 12.056a.9.9 0 0 1 .9-.9h21.794a.9.9 0 0 1 .9.9v9.888a.9.9 0 0 1-.9.9H5.173a.9.9 0 0 1-.9-.9z"/></g><g filter="url(#iwhGv1b)"><path stroke="#818cf8" stroke-width="1.5" d="M4.273 12.056a.9.9 0 0 1 .9-.9h21.794a.9.9 0 0 1 .9.9v9.888a.9.9 0 0 1-.9.9H5.173a.9.9 0 0 1-.9-.9z"/></g><g filter="url(#igXRFod)"><path fill="url(#iZq1Lqe)" d="M4.273 12.056a.9.9 0 0 1 .9-.9h21.794a.9.9 0 0 1 .9.9v9.888a.9.9 0 0 1-.9.9H5.173a.9.9 0 0 1-.9-.9z"/><path fill="url(#iRxjexe)" d="M4.273 12.056a.9.9 0 0 1 .9-.9h21.794a.9.9 0 0 1 .9.9v9.888a.9.9 0 0 1-.9.9H5.173a.9.9 0 0 1-.9-.9z"/></g><path fill="#818cf8" d="M8.586 14.484a.984.984 0 1 1 1.969 0V15.5a.984.984 0 1 1-1.97 0z"/><path fill="#818cf8" d="M8.586 18.5a.984.984 0 1 1 1.969 0v1.016a.984.984 0 1 1-1.97 0z"/><path fill="#818cf8" d="M12.617 14.484a.984.984 0 1 1 1.969 0V15.5a.984.984 0 1 1-1.969 0z"/><path fill="#818cf8" d="M12.617 18.5a.984.984 0 1 1 1.969 0v1.016a.984.984 0 1 1-1.969 0z"/><path fill="#818cf8" d="M17.566 14.484a.984.984 0 1 1 1.97 0V15.5a.984.984 0 0 1-1.97 0z"/><path fill="#818cf8" d="M17.566 18.5a.984.984 0 1 1 1.97 0v1.016a.984.984 0 0 1-1.97 0z"/><path fill="#818cf8" d="M21.598 14.484a.984.984 0 1 1 1.968 0V15.5a.984.984 0 1 1-1.968 0z"/><path fill="#818cf8" d="M21.598 18.5a.984.984 0 1 1 1.968 0v1.016a.984.984 0 1 1-1.968 0z"/><g filter="url(#iX8i7Gb)"><path fill="#818cf8" d="M4.031 26.469A1.47 1.47 0 0 1 5.5 25h4.96a1.469 1.469 0 1 1 0 2.938H5.5a1.47 1.47 0 0 1-1.469-1.47"/></g><g filter="url(#iJMagte)"><path fill="#818cf8" d="M13.531 26.469A1.47 1.47 0 0 1 15 25h4.96a1.469 1.469 0 1 1 0 2.938H15a1.47 1.47 0 0 1-1.469-1.47"/></g><g filter="url(#iKzP8Tc)"><path fill="#818cf8" d="M23.031 26.469A1.47 1.47 0 0 1 24.5 25h1.977a1.469 1.469 0 0 1 0 2.938H24.5a1.47 1.47 0 0 1-1.469-1.47"/><path fill="url(#imKGssc)" d="M23.031 26.469A1.47 1.47 0 0 1 24.5 25h1.977a1.469 1.469 0 0 1 0 2.938H24.5a1.47 1.47 0 0 1-1.469-1.47"/></g><g filter="url(#ieG1GZb)"><path stroke="url(#i28sVdc)" stroke-width="1.5" d="M4.031 10.188h23.555a1.5 1.5 0 0 1 1.5 1.5v15.804c.008.315-.16.945-.895.945"/></g><defs><filter id="iFIBuPb" width="28.953" height="22.422" x="2.023" y="8.031" 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=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.372549 0 0 0 0 0.27451 0 0 0 0 0.458824 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_19194"/><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=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.231373 0 0 0 0 0.192157 0 0 0 0 0.254902 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_19194" result="effect2_innerShadow_18_19194"/></filter><filter id="ipkfL7c" width="24.994" height="13.088" x="3.573" y="10.456" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_19194" stdDeviation=".15"/></filter><filter id="iwhGv1b" width="24.194" height="12.287" x="3.973" y="10.856" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_19194" stdDeviation=".1"/></filter><filter id="igXRFod" width="24.094" height="12.188" x="3.773" y="11.156" 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=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.262745 0 0 0 0 0.764706 0 0 0 0 0.486275 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_19194"/></filter><filter id="iX8i7Gb" width="8.698" height="4.037" x="3.531" y="24.4" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><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=".2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.211765 0 0 0 0 0.156863 0 0 0 0 0.262745 0 0 0 1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_18_19194"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_18_19194" 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=".3"/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.960784 0 0 0 0 0.929412 0 0 0 0 0.996078 0 0 0 1 0"/><feBlend in2="shape" result="effect2_innerShadow_18_19194"/><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="-.6"/><feGaussianBlur stdDeviation=".6"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.780392 0 0 0 0 0.670588 0 0 0 0 0.878431 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_19194" result="effect3_innerShadow_18_19194"/></filter><filter id="iJMagte" width="8.698" height="4.037" x="13.031" y="24.4" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><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=".2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.211765 0 0 0 0 0.156863 0 0 0 0 0.262745 0 0 0 1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_18_19194"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_18_19194" 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=".3"/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.960784 0 0 0 0 0.929412 0 0 0 0 0.996078 0 0 0 1 0"/><feBlend in2="shape" result="effect2_innerShadow_18_19194"/><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="-.6"/><feGaussianBlur stdDeviation=".6"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.780392 0 0 0 0 0.670588 0 0 0 0 0.878431 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_19194" result="effect3_innerShadow_18_19194"/></filter><filter id="iKzP8Tc" width="5.714" height="4.037" x="22.531" y="24.4" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><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=".2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.211765 0 0 0 0 0.156863 0 0 0 0 0.262745 0 0 0 1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_18_19194"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_18_19194" 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=".3"/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.94902 0 0 0 0 0.192157 0 0 0 0 0.478431 0 0 0 1 0"/><feBlend in2="shape" result="effect2_innerShadow_18_19194"/><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="-.6"/><feGaussianBlur stdDeviation=".6"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.862745 0 0 0 0 0.101961 0 0 0 0 0.286275 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_19194" result="effect3_innerShadow_18_19194"/></filter><filter id="ieG1GZb" width="26.93" height="20.5" x="3.281" y="9.063" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_19194" stdDeviation=".375"/></filter><linearGradient id="ijgguqH" x1="16" x2="16" y1="9.031" y2="29.953" gradientUnits="userSpaceOnUse"><stop stop-color="#5F4675"/><stop offset="1" stop-color="#50425D"/></linearGradient><linearGradient id="itWTR7c" x1="16.07" x2="16.07" y1="11.156" y2="22.844" gradientUnits="userSpaceOnUse"><stop stop-color="#543576"/><stop offset="1" stop-color="#42384F"/></linearGradient><linearGradient id="iIwgTNe" x1="3.93" x2="18.398" y1="19.313" y2="15.969" gradientUnits="userSpaceOnUse"><stop offset=".065" stop-color="#6E6479"/><stop offset=".342" stop-color="#6E6479" stop-opacity="0"/></linearGradient><linearGradient id="iXApqKd" x1="14.961" x2="14.961" y1="23.406" y2="22.953" gradientUnits="userSpaceOnUse"><stop offset=".194" stop-color="#6E6479"/><stop offset="1" stop-color="#6E6479" stop-opacity="0"/></linearGradient><linearGradient id="iZq1Lqe" x1="12.242" x2="25.497" y1="22.188" y2="7.901" gradientUnits="userSpaceOnUse"><stop stop-color="#4DE399"/><stop offset="1" stop-color="#47C282"/></linearGradient><linearGradient id="iRxjexe" x1="18.242" x2="18.242" y1="24.031" y2="20.688" gradientUnits="userSpaceOnUse"><stop stop-color="#4BE18C"/><stop offset="1" stop-color="#4DE299" stop-opacity="0"/></linearGradient><linearGradient id="i28sVdc" x1="29.086" x2="16.652" y1="9.597" y2="28.711" gradientUnits="userSpaceOnUse"><stop stop-color="#837196"/><stop offset=".873" stop-color="#837196" stop-opacity="0"/></linearGradient><radialGradient id="ik56B9c" cx="0" cy="0" r="1" gradientTransform="rotate(138.468 12.938 10.526)scale(1.69894 2.96575)" gradientUnits="userSpaceOnUse"><stop offset=".303" stop-color="#847297"/><stop offset="1" stop-color="#847297" stop-opacity="0"/></radialGradient><radialGradient id="imKGssc" cx="0" cy="0" r="1" gradientTransform="matrix(-1.0625 .75 -1.32247 -1.87348 27.648 25.719)" gradientUnits="userSpaceOnUse"><stop offset=".214" stop-color="#FF6588"/><stop offset="1" stop-color="#FF6588" 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. PagerIcon.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.