<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(#iVVX8sc)"><path fill="url(#i3vXRkc)" fill-rule="evenodd" d="M9.803 23.175c-.874 1.332-1.926 2.934-2.025 3.106l-.075.126c-.19.31-.438.715-.19 1.142c.282.486.946.493 1.082.493h14.966c.322 0 .6-.097.852-.427c.253-.331.158-.769-.157-1.163c-.219-.273-1.315-1.977-2.188-3.333c-.412-.64-.774-1.203-.97-1.501H10.824zm1.024 1.479l.308-.512c.078-.126.438-.413.895-.413l7.977.07c.399 0 .598.09.783.363c.148.218.24.336.363.492zm-1.153 1.742c.058-.078.222-.317.308-.457c.162-.265.45-.356.908-.356h10.362c.39 0 .565.167.706.38c.078.116.201.323.273.433z" clip-rule="evenodd"/></g><path fill="#818cf8" d="M12.046 3.913h1.938v2.006h-1.938z"/><path fill="url(#iE8LK6d)" d="M12.046 3.913h1.938v2.006h-1.938z"/><path fill="url(#iQkKKhe)" d="M12.046 3.913h1.938v2.006h-1.938z"/><path fill="url(#inwEhCc)" d="M12.046 3.913h1.938v2.006h-1.938z"/><path fill="url(#ivKWHJu)" d="M12.046 3.913h1.938v2.006h-1.938z"/><path fill="#818cf8" d="M17.966 3.913h1.938v2.006h-1.938z"/><path fill="url(#i0yF8vc)" d="M17.966 3.913h1.938v2.006h-1.938z"/><path fill="url(#iUqeQLD)" d="M17.966 3.913h1.938v2.006h-1.938z"/><path fill="url(#i0SvdUD)" d="M17.966 3.913h1.938v2.006h-1.938z"/><path fill="url(#iIFMMeb)" d="M17.966 3.913h1.938v2.006h-1.938z"/><g filter="url(#iWqQ5ye)"><rect width="13.881" height="1.979" x="9.043" y="2.125" fill="url(#i0B20xU)" rx=".99"/><rect width="13.881" height="1.979" x="9.043" y="2.125" fill="url(#i5lh7Be)" rx=".99"/></g><g filter="url(#i2agg1d)"><path fill="url(#i2WMbuK)" d="M7.132 11.12h17.736v8.71a4 4 0 0 1-4 4h-9.736a4 4 0 0 1-4-4z"/><path fill="url(#iKoi6jd)" d="M7.132 11.12h17.736v8.71a4 4 0 0 1-4 4h-9.736a4 4 0 0 1-4-4z"/></g><g filter="url(#ikUxbUc)"><path fill="url(#i1gAyNe)" d="M7.132 7.128a2 2 0 0 1 2-2h13.736a2 2 0 0 1 2 2v7.93a2.9 2.9 0 0 1-2.9 2.9H10.032a2.9 2.9 0 0 1-2.9-2.9z"/></g><path fill="url(#ip3QIwc)" d="M7.132 7.128a2 2 0 0 1 2-2h13.736a2 2 0 0 1 2 2v7.93a2.9 2.9 0 0 1-2.9 2.9H10.032a2.9 2.9 0 0 1-2.9-2.9z"/><g filter="url(#i9JwJYu)"><path fill="url(#iE6vOze)" d="M9.084 10h13.799v4.924a1 1 0 0 1-1 1h-11.8a1 1 0 0 1-1-1z"/><path fill="url(#i9G396c)" d="M9.084 10h13.799v4.924a1 1 0 0 1-1 1h-11.8a1 1 0 0 1-1-1z"/></g><path fill="url(#iGI73mb)" d="M22.883 10h-13.8V7.94a.9.9 0 0 1 .9-.9h12a.9.9 0 0 1 .9.9z"/><path fill="url(#iWVtm1c)" d="M22.883 10h-13.8V7.94a.9.9 0 0 1 .9-.9h12a.9.9 0 0 1 .9.9z"/><rect width="3.961" height="1.953" x="9.079" y="18.925" fill="url(#i3ghLib)" rx=".977"/><rect width="3.961" height="1.953" x="18.922" y="18.925" fill="url(#iYnOKpe)" rx=".977"/><rect width="3.938" height=".984" x="14.028" y="18.925" fill="url(#izOechd)" rx=".492"/><rect width="3.938" height=".984" x="14.028" y="18.925" fill="url(#i96SzYb)" rx=".492"/><rect width="3.938" height=".984" x="14.028" y="18.925" fill="url(#iIqo6tP)" rx=".492"/><g filter="url(#iZDlAFd)"><path stroke="url(#iVGzWKd)" stroke-linecap="round" stroke-width="1.5" d="M9.466 10.673v4.297a.5.5 0 0 0 .5.5"/></g><g filter="url(#iXjjrYd)"><path stroke="url(#im0jeiB)" stroke-linecap="round" stroke-width="1.5" d="M10.052 15.503h9.937"/></g><defs><linearGradient id="i3vXRkc" x1="28.367" x2="28.367" y1="20.61" y2="27.563" gradientUnits="userSpaceOnUse"><stop offset=".73" stop-color="#0C0E1C"/><stop offset=".919" stop-color="#56218E"/></linearGradient><linearGradient id="iE8LK6d" x1="11.943" x2="12.38" y1="5.112" y2="5.112" gradientUnits="userSpaceOnUse"><stop stop-color="#888789"/><stop offset="1" stop-color="#888789" stop-opacity="0"/></linearGradient><linearGradient id="iQkKKhe" x1="12.38" x2="12.38" y1="3.913" y2="4.221" gradientUnits="userSpaceOnUse"><stop stop-color="#888789"/><stop offset="1" stop-color="#888789" stop-opacity="0"/></linearGradient><linearGradient id="ivKWHJu" x1="14.208" x2="13.984" y1="4.018" y2="4.417" gradientUnits="userSpaceOnUse"><stop stop-color="#8F8C92"/><stop offset="1" stop-color="#8F8C92" stop-opacity="0"/></linearGradient><linearGradient id="i0yF8vc" x1="17.708" x2="18.505" y1="5.112" y2="5.081" gradientUnits="userSpaceOnUse"><stop stop-color="#888789"/><stop offset="1" stop-color="#888789" stop-opacity="0"/></linearGradient><linearGradient id="iUqeQLD" x1="18.3" x2="18.3" y1="3.913" y2="4.221" gradientUnits="userSpaceOnUse"><stop stop-color="#888789"/><stop offset="1" stop-color="#888789" stop-opacity="0"/></linearGradient><linearGradient id="iIFMMeb" x1="20.129" x2="19.904" y1="4.018" y2="4.417" gradientUnits="userSpaceOnUse"><stop stop-color="#8F8C92"/><stop offset="1" stop-color="#8F8C92" stop-opacity="0"/></linearGradient><linearGradient id="i5lh7Be" x1="22.924" x2="22.024" y1="3.419" y2="3.419" gradientUnits="userSpaceOnUse"><stop stop-color="#FFFEFF"/><stop offset="1" stop-color="#FFFEFF" stop-opacity="0"/></linearGradient><linearGradient id="i2WMbuK" x1="11.052" x2="25.427" y1="23.44" y2="23.44" gradientUnits="userSpaceOnUse"><stop stop-color="#DF2E96"/><stop offset="1" stop-color="#F92F56"/></linearGradient><linearGradient id="i1gAyNe" x1="8.608" x2="20.941" y1="13.469" y2="9.254" gradientUnits="userSpaceOnUse"><stop stop-color="#D9C3F1"/><stop offset="1" stop-color="#ECDDFC"/></linearGradient><linearGradient id="iE6vOze" x1="9.084" x2="22.883" y1="14.893" y2="14.893" gradientUnits="userSpaceOnUse"><stop stop-color="#47BCFF"/><stop offset=".589" stop-color="#5BDEFF"/><stop offset=".822" stop-color="#5BDEFF"/><stop offset="1" stop-color="#4FB8FF"/></linearGradient><linearGradient id="iGI73mb" x1="9.864" x2="22.364" y1="10.001" y2="10.001" gradientUnits="userSpaceOnUse"><stop stop-color="#4B3E59"/><stop offset="1" stop-color="#5C4575"/></linearGradient><linearGradient id="iWVtm1c" x1="15.983" x2="15.983" y1="10.081" y2="9.5" gradientUnits="userSpaceOnUse"><stop stop-color="#3E2257"/><stop offset="1" stop-color="#3E2257" stop-opacity="0"/></linearGradient><linearGradient id="izOechd" x1="15.997" x2="15.997" y1="18.8" y2="19.784" gradientUnits="userSpaceOnUse"><stop stop-color="#B68FDB"/><stop offset="1" stop-color="#DECFEC"/></linearGradient><linearGradient id="iVGzWKd" x1="9.684" x2="9.684" y1="15.47" y2="9.268" gradientUnits="userSpaceOnUse"><stop stop-color="#62D3FF"/><stop offset="1" stop-color="#63D4FF" stop-opacity="0"/></linearGradient><linearGradient id="im0jeiB" x1="10.724" x2="18.461" y1="16.588" y2="16.588" gradientUnits="userSpaceOnUse"><stop stop-color="#62D3FF" stop-opacity=".5"/><stop offset="1" stop-color="#57E5FF"/></linearGradient><radialGradient id="inwEhCc" cx="0" cy="0" r="1" gradientTransform="matrix(0 -1.11719 .43446 0 13.984 5.198)" gradientUnits="userSpaceOnUse"><stop stop-color="#E2E0E3"/><stop offset="1" stop-color="#E2E0E3" stop-opacity="0"/></radialGradient><radialGradient id="i0SvdUD" cx="0" cy="0" r="1" gradientTransform="matrix(0 -1.11719 .43446 0 19.904 5.198)" gradientUnits="userSpaceOnUse"><stop stop-color="#E2E0E3"/><stop offset="1" stop-color="#E2E0E3" stop-opacity="0"/></radialGradient><radialGradient id="i0B20xU" cx="0" cy="0" r="1" gradientTransform="matrix(0 1.35142 -13.6262 0 19.49 2.753)" gradientUnits="userSpaceOnUse"><stop stop-color="#E2DDE8"/><stop offset="1" stop-color="#BDB8C3"/></radialGradient><radialGradient id="iKoi6jd" cx="0" cy="0" r="1" gradientTransform="matrix(-.76028 -.9956 2.44315 -1.8657 23.784 22.922)" gradientUnits="userSpaceOnUse"><stop stop-color="#D6356C"/><stop offset="1" stop-color="#D6356C" stop-opacity="0"/></radialGradient><radialGradient id="ip3QIwc" cx="0" cy="0" r="1" gradientTransform="matrix(0 -2.04524 18.2752 0 16 18.585)" gradientUnits="userSpaceOnUse"><stop stop-color="#E8D2FF"/><stop offset="1" stop-color="#E8D2FF" stop-opacity="0"/></radialGradient><radialGradient id="i9G396c" cx="0" cy="0" r="1" gradientTransform="matrix(0 -2.17222 8.76128 0 17.702 16.894)" gradientUnits="userSpaceOnUse"><stop offset=".133" stop-color="#56E8FF"/><stop offset="1" stop-color="#56E8FF" stop-opacity="0"/></radialGradient><radialGradient id="i3ghLib" cx="0" cy="0" r="1" gradientTransform="matrix(3.24921 0 0 2.01281 9.42 20.603)" gradientUnits="userSpaceOnUse"><stop offset=".171" stop-color="#FFB432"/><stop offset="1" stop-color="#FB730D"/><stop offset="1" stop-color="#FF7324"/></radialGradient><radialGradient id="iYnOKpe" cx="0" cy="0" r="1" gradientTransform="matrix(3.24921 0 0 2.01281 19.262 20.603)" gradientUnits="userSpaceOnUse"><stop offset=".171" stop-color="#FFB432"/><stop offset="1" stop-color="#FB730D"/><stop offset="1" stop-color="#FF7324"/></radialGradient><radialGradient id="i96SzYb" cx="0" cy="0" r="1" gradientTransform="matrix(2.35423 0 0 1.16216 15.703 19.417)" gradientUnits="userSpaceOnUse"><stop offset=".762" stop-color="#A08EB3" stop-opacity="0"/><stop offset="1" stop-color="#A08EB3"/></radialGradient><radialGradient id="iIqo6tP" cx="0" cy="0" r="1" gradientTransform="matrix(-4.3779 0 0 -2.62847 18.299 19.502)" gradientUnits="userSpaceOnUse"><stop offset=".904" stop-color="#DCD0E8" stop-opacity="0"/><stop offset="1" stop-color="#DCD0E8"/></radialGradient><filter id="iVVX8sc" width="17.95" height="6.575" x="7.009" y="21.468" 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=".4"/><feGaussianBlur stdDeviation=".4"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.258824 0 0 0 0 0.247059 0 0 0 0 0.278431 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_9540"/><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="-.4"/><feGaussianBlur stdDeviation=".4"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.258824 0 0 0 0 0.247059 0 0 0 0 0.278431 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_9540" result="effect2_innerShadow_18_9540"/><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="-.15"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.345098 0 0 0 0 0.12549 0 0 0 0 0.572549 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_9540" result="effect3_innerShadow_18_9540"/></filter><filter id="iWqQ5ye" width="14.481" height="2.129" x="9.043" y="1.975" 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=".6" dy="-.15"/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.556863 0 0 0 0 0.541176 0 0 0 0 0.576471 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_9540"/></filter><filter id="i2agg1d" width="18.737" height="12.711" x="7.132" y="11.12" 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=".6"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.698039 0 0 0 0 0.227451 0 0 0 0 0.454902 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_9540"/></filter><filter id="ikUxbUc" width="18.987" height="12.98" x="6.382" y="5.128" 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=".15"/><feGaussianBlur stdDeviation=".355"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.847059 0 0 0 0 0.839216 0 0 0 0 0.854902 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_9540"/><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="-.75"/><feGaussianBlur stdDeviation=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.992157 0 0 0 0 1 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_9540" result="effect2_innerShadow_18_9540"/><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"/><feGaussianBlur stdDeviation=".625"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.611765 0 0 0 0 0.580392 0 0 0 0 0.65098 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_9540" result="effect3_innerShadow_18_9540"/></filter><filter id="i9JwJYu" width="14.549" height="6.424" x="8.334" y="10.001" 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="-.75" dy=".5"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.254902 0 0 0 0 0.65098 0 0 0 0 1 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_9540"/></filter><filter id="iZDlAFd" width="1.25" height="5.547" x="9.091" y="10.298" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_9540" stdDeviation=".125"/></filter><filter id="iXjjrYd" width="10.688" height=".75" x="9.677" y="15.128" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_9540" stdDeviation=".125"/></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. TramIcon.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.