<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><g fill="none"><path fill="url(#iIunzec)" d="M28.831 2.165H3.104c-.63 0-1.141.51-1.141 1.14v25.72c0 .63.51 1.14 1.14 1.14h25.718a1.14 1.14 0 0 0 1.141-1.14V3.305c.01-.63-.51-1.14-1.13-1.14"/><path fill="url(#iD0nqiG)" d="M28.831 2.165H3.104c-.63 0-1.141.51-1.141 1.14v25.72c0 .63.51 1.14 1.14 1.14h25.718a1.14 1.14 0 0 0 1.141-1.14V3.305c.01-.63-.51-1.14-1.13-1.14"/><path fill="url(#iBEHTac)" d="M28.831 2.165H3.104c-.63 0-1.141.51-1.141 1.14v25.72c0 .63.51 1.14 1.14 1.14h25.718a1.14 1.14 0 0 0 1.141-1.14V3.305c.01-.63-.51-1.14-1.13-1.14"/><path fill="url(#iVsPzEd)" d="M28.831 2.165H3.104c-.63 0-1.141.51-1.141 1.14v25.72c0 .63.51 1.14 1.14 1.14h25.718a1.14 1.14 0 0 0 1.141-1.14V3.305c.01-.63-.51-1.14-1.13-1.14"/><path fill="url(#i40l6Ic)" d="M28.831 2.165H3.104c-.63 0-1.141.51-1.141 1.14v25.72c0 .63.51 1.14 1.14 1.14h25.718a1.14 1.14 0 0 0 1.141-1.14V3.305c.01-.63-.51-1.14-1.13-1.14"/><g filter="url(#iyjq9Pc)"><path fill="#818cf8" d="M15.286 22.29a5.823 5.823 0 1 0 0-11.647a5.823 5.823 0 0 0 0 11.647"/></g><g filter="url(#iANQ3qe)"><path fill="url(#iQrHQze)" d="M28.831 2.165H3.104c-.63 0-1.141.51-1.141 1.14V7.93a2 2 0 0 0 .968 1.713L13.485 16h4.955l10.554-6.357a2 2 0 0 0 .968-1.713V3.305c.01-.63-.5-1.14-1.13-1.14"/><path fill="url(#i9RLqhd)" d="M28.831 2.165H3.104c-.63 0-1.141.51-1.141 1.14V7.93a2 2 0 0 0 .968 1.713L13.485 16h4.955l10.554-6.357a2 2 0 0 0 .968-1.713V3.305c.01-.63-.5-1.14-1.13-1.14"/><path fill="url(#ijQlnsW)" d="M28.831 2.165H3.104c-.63 0-1.141.51-1.141 1.14V7.93a2 2 0 0 0 .968 1.713L13.485 16h4.955l10.554-6.357a2 2 0 0 0 .968-1.713V3.305c.01-.63-.5-1.14-1.13-1.14"/></g><path fill="url(#iegsZxc)" d="M28.831 2.165H3.104c-.63 0-1.141.51-1.141 1.14V7.93a2 2 0 0 0 .968 1.713L13.485 16h4.955l10.554-6.357a2 2 0 0 0 .968-1.713V3.305c.01-.63-.5-1.14-1.13-1.14"/><path fill="url(#iD71xNe)" d="M28.831 2.165H3.104c-.63 0-1.141.51-1.141 1.14V7.93a2 2 0 0 0 .968 1.713L13.485 16h4.955l10.554-6.357a2 2 0 0 0 .968-1.713V3.305c.01-.63-.5-1.14-1.13-1.14"/><g filter="url(#itsiwvd)"><path fill="#818cf8" d="M15.963 22.165a6 6 0 1 0 0-12a6 6 0 0 0 0 12"/></g><path fill="#818cf8" d="m19.997 17.587l.04-1.34c0-.1-.04-.2-.11-.27a.38.38 0 0 0-.27-.1l-4.1.3c-.19.01-.34.18-.33.37l.01.1l-1.02-.37v-.4l1.02-1.23c.1-.12.11-.28.03-.41a.37.37 0 0 0-.37-.17l-2.65.53c-.19.04-.31.22-.28.42c.04.19.22.32.42.28l1.67-.33l-2.01 2.42c-.12.15-.1.37.05.5a.4.4 0 0 0 .23.08c.1 0 .2-.04.27-.13l.92-1.11v2.77c0 .19.16.35.35.35s.35-.16.35-.35v-2.46l1.06.39l.09 1.56c.01.19.17.33.35.33h.01l1.85-.04l2.03-.05c.19 0 .34-.15.34-.34l.04-1.29c.01 0 .01-.01.01-.01m-.69-.33l-1.43.06l-.02-.6l1.48-.11zm-2.16-.48l.02.58l-1.18.05l-.03-.55zm-1.12 1.34l1.16-.05l.02.52l-1.15.03zm1.89.45l-.02-.53l1.39-.06l-.02.56z"/><path fill="#818cf8" d="m19.027 13.387l-3 .26a.35.35 0 0 0-.27.17c-.06.1-.07.21-.03.32l.52 1.28c.05.14.18.22.33.22h.02l1.96-.14c.14-.01.26-.1.31-.23l.53-1.41c.04-.11.02-.24-.05-.34a.42.42 0 0 0-.32-.13m-.74 1.43l-1.48.1l-.24-.6l1.97-.17zm-3.8-1.02c.07.07.16.1.25.1s.18-.04.25-.11a.35.35 0 0 0-.01-.5l-.95-.92a.35.35 0 0 0-.5.01a.35.35 0 0 0 .01.5zm1.37-.66h.05l2.88-.27c.19-.02.34-.19.32-.38a.355.355 0 0 0-.38-.32l-2.88.27c-.19.02-.34.19-.32.38c.02.18.16.31.33.32"/><defs><linearGradient id="iIunzec" x1="15.965" x2="15.965" y1="8.52" y2="30.165" gradientUnits="userSpaceOnUse"><stop stop-color="#DB2B3C"/><stop offset="1" stop-color="#DD1E83"/></linearGradient><linearGradient id="iD0nqiG" x1="16.586" x2="16.586" y1="30.714" y2="28.083" gradientUnits="userSpaceOnUse"><stop stop-color="#BD2D89"/><stop offset="1" stop-color="#BD2D89" stop-opacity="0"/></linearGradient><linearGradient id="iBEHTac" x1="1.544" x2="5.325" y1="22.823" y2="22.823" gradientUnits="userSpaceOnUse"><stop stop-color="#C66370"/><stop offset="1" stop-color="#C66370" stop-opacity="0"/></linearGradient><linearGradient id="iQrHQze" x1="1.379" x2="29.963" y1="8.415" y2="8.415" gradientUnits="userSpaceOnUse"><stop stop-color="#EB313F"/><stop offset="1" stop-color="#FC3972"/></linearGradient><linearGradient id="i9RLqhd" x1="1.544" x2="5.325" y1="11.387" y2="11.387" gradientUnits="userSpaceOnUse"><stop stop-color="#C66370"/><stop offset="1" stop-color="#C66370" stop-opacity="0"/></linearGradient><linearGradient id="iegsZxc" x1="7.796" x2="8.317" y1="12.863" y2="12.001" gradientUnits="userSpaceOnUse"><stop stop-color="#C22539"/><stop offset="1" stop-color="#C22539" stop-opacity="0"/></linearGradient><linearGradient id="iD71xNe" x1="15.963" x2="15.963" y1="2.165" y2="3.348" gradientUnits="userSpaceOnUse"><stop stop-color="#DE6A7E"/><stop offset="1" stop-color="#DE6A7E" stop-opacity="0"/></linearGradient><radialGradient id="iVsPzEd" cx="0" cy="0" r="1" gradientTransform="matrix(-9.06558 16.52642 -18.66298 -10.23759 30.88 7.388)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF4B52"/><stop offset="1" stop-color="#FF4B52" stop-opacity="0"/></radialGradient><radialGradient id="i40l6Ic" cx="0" cy="0" r="1" gradientTransform="matrix(0 16.9276 -10.8536 0 23.981 8.752)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF5860"/><stop offset="1" stop-color="#FF5860" stop-opacity="0"/></radialGradient><radialGradient id="ijQlnsW" cx="0" cy="0" r="1" gradientTransform="matrix(0 14.3849 -6.48488 0 27.628 6.465)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF68AB"/><stop offset="1" stop-color="#FF68AB" stop-opacity="0"/></radialGradient><filter id="iyjq9Pc" width="13.646" height="13.646" x="8.463" y="9.643" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_1190" stdDeviation=".5"/></filter><filter id="iANQ3qe" width="28" height="14.335" x="1.963" y="1.665" 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=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.933333 0 0 0 0 0.141176 0 0 0 0 0.372549 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_1190"/></filter><filter id="itsiwvd" width="13" height="13" x="9.463" y="9.665" 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=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.890196 0 0 0 0 0.341176 0 0 0 0 0.458824 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_1190"/><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=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.615686 0 0 0 0 0.0941176 0 0 0 0 0.301961 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_1190" result="effect2_innerShadow_18_1190"/><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=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.698039 0 0 0 0 0.14902 0 0 0 0 0.282353 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_1190" result="effect3_innerShadow_18_1190"/><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=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.698039 0 0 0 0 0.14902 0 0 0 0 0.282353 0 0 0 1 0"/><feBlend in2="effect3_innerShadow_18_1190" result="effect4_innerShadow_18_1190"/><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=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.643137 0 0 0 0 0.0823529 0 0 0 0 0.317647 0 0 0 1 0"/><feBlend in2="effect4_innerShadow_18_1190" result="effect5_innerShadow_18_1190"/></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. RedEnvelopeIcon.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.