<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(#iMfF6ue)"><path fill="url(#iPjcRpq)" d="M19.938 5.327c.091.18.271.301.473.301h1.609a2 2 0 0 1 2 2v19.726H7.962V7.628a2 2 0 0 1 2-2h1.61a.54.54 0 0 0 .472-.301a4.43 4.43 0 0 1 7.894 0"/></g><g filter="url(#i8hZGBe)"><path fill="#818cf8" fill-rule="evenodd" d="M15.99 5.218a2.55 2.55 0 0 0-2.464 1.902c-.09.344-.392.653-.8.653h-2.27a.375.375 0 0 0-.375.375V26.42c0 .124.1.225.225.225h11.363c.124 0 .225-.1.225-.225V8.148a.375.375 0 0 0-.375-.375h-2.263c-.408 0-.71-.31-.8-.653a2.55 2.55 0 0 0-2.465-1.902M12.995 6.98a3.099 3.099 0 0 1 5.994 0c.04.155.16.243.268.243h2.263c.51 0 .925.414.925.925V26.42a.775.775 0 0 1-.775.775H10.306a.775.775 0 0 1-.775-.775V8.148c0-.511.414-.925.925-.925h2.27c.107 0 .227-.088.268-.243" clip-rule="evenodd"/></g><g filter="url(#iKPaWod)"><rect width="6.791" height=".787" x="12.604" y="12.273" fill="#818cf8" rx=".394"/><rect width="6.791" height=".787" x="12.604" y="12.273" fill="url(#iUO9Hsb)" rx=".394"/></g><g filter="url(#iHljDJd)"><rect width="5.251" height=".787" x="13.374" y="14.738" fill="#818cf8" rx=".394"/><rect width="5.251" height=".787" x="13.374" y="14.738" fill="url(#iUzE6ea)" rx=".394"/></g><g filter="url(#icKv9eu)"><rect width="3.019" height=".787" x="11.956" y="17.203" fill="#818cf8" rx=".394"/><rect width="3.019" height=".787" x="11.956" y="17.203" fill="url(#iJfH09h)" rx=".394"/></g><g filter="url(#iJQNdkb)"><rect width="4.455" height=".787" fill="#818cf8" rx=".394" transform="matrix(-1 0 0 1 19.975 17.203)"/><rect width="4.455" height=".787" fill="url(#iRWwSgb)" rx=".394" transform="matrix(-1 0 0 1 19.975 17.203)"/></g><path fill="url(#iXPZDYc)" d="M5.894 25.8a1 1 0 0 1 1-1h18.194a1 1 0 0 1 1 1v1.554H5.894z"/><path fill="url(#iTeyIuo)" d="M5.894 25.8a1 1 0 0 1 1-1h18.194a1 1 0 0 1 1 1v1.554H5.894z"/><path fill="url(#igsXP0b)" d="M5.894 25.8a1 1 0 0 1 1-1h18.194a1 1 0 0 1 1 1v1.554H5.894z"/><path fill="url(#imqlFjf)" d="M5.894 25.8a1 1 0 0 1 1-1h18.194a1 1 0 0 1 1 1v1.554H5.894z"/><path fill="url(#iHZgNXc)" d="M2.014 29.216a2.5 2.5 0 0 1 2.5-2.5h22.954a2.5 2.5 0 0 1 2.5 2.5v.614H2.014z"/><path fill="url(#ipylXAe)" d="M2.014 29.216a2.5 2.5 0 0 1 2.5-2.5h22.954a2.5 2.5 0 0 1 2.5 2.5v.614H2.014z"/><path fill="url(#i2TMcWd)" d="M2.014 29.216a2.5 2.5 0 0 1 2.5-2.5h22.954a2.5 2.5 0 0 1 2.5 2.5v.614H2.014z"/><path fill="url(#i7t7HFv)" d="M2.014 29.216a2.5 2.5 0 0 1 2.5-2.5h22.954a2.5 2.5 0 0 1 2.5 2.5v.614H2.014z"/><defs><linearGradient id="iPjcRpq" x1="16.354" x2="16.354" y1="18.813" y2="25.938" gradientUnits="userSpaceOnUse"><stop stop-color="#C1C1C7"/><stop offset=".925" stop-color="#A4A2AD"/></linearGradient><linearGradient id="iUO9Hsb" x1="12.823" x2="13.198" y1="12.875" y2="12.875" gradientUnits="userSpaceOnUse"><stop stop-color="#9B9BA1"/><stop offset="1" stop-color="#9B9BA1" stop-opacity="0"/></linearGradient><linearGradient id="iUzE6ea" x1="13.543" x2="13.833" y1="15.34" y2="15.34" gradientUnits="userSpaceOnUse"><stop stop-color="#9B9BA1"/><stop offset="1" stop-color="#9B9BA1" stop-opacity="0"/></linearGradient><linearGradient id="iJfH09h" x1="12.053" x2="12.219" y1="17.805" y2="17.805" gradientUnits="userSpaceOnUse"><stop stop-color="#9B9BA1"/><stop offset="1" stop-color="#9B9BA1" stop-opacity="0"/></linearGradient><linearGradient id="iRWwSgb" x1=".143" x2=".389" y1=".602" y2=".602" gradientUnits="userSpaceOnUse"><stop stop-color="#9B9BA1"/><stop offset="1" stop-color="#9B9BA1" stop-opacity="0"/></linearGradient><linearGradient id="iXPZDYc" x1="20.354" x2="4.979" y1="26.077" y2="26.077" gradientUnits="userSpaceOnUse"><stop stop-color="#DDDBE5"/><stop offset="1" stop-color="#7D7B89"/></linearGradient><linearGradient id="iTeyIuo" x1="26.088" x2="23.479" y1="26.625" y2="26.563" gradientUnits="userSpaceOnUse"><stop stop-color="#D4D6D8"/><stop offset=".991" stop-color="#D4D6D8" stop-opacity="0"/></linearGradient><linearGradient id="igsXP0b" x1="15.991" x2="15.991" y1="24.5" y2="25.313" gradientUnits="userSpaceOnUse"><stop offset=".115" stop-color="#B5B4B9"/><stop offset="1" stop-color="#B5B4B9" stop-opacity="0"/></linearGradient><linearGradient id="iHZgNXc" x1="29.968" x2="1.354" y1="30.125" y2="30.125" gradientUnits="userSpaceOnUse"><stop stop-color="#9BE173"/><stop offset="1" stop-color="#73B056"/></linearGradient><linearGradient id="ipylXAe" x1=".104" x2="6.854" y1="29.83" y2="29.83" gradientUnits="userSpaceOnUse"><stop stop-color="#699860"/><stop offset="1" stop-color="#699860" stop-opacity="0"/></linearGradient><linearGradient id="i2TMcWd" x1="19.104" x2="19.166" y1="31.375" y2="28.273" gradientUnits="userSpaceOnUse"><stop offset=".173" stop-color="#5A936E"/><stop offset="1" stop-color="#92BAA3" stop-opacity="0"/></linearGradient><filter id="iMfF6ue" width="16.808" height="24.944" x="7.712" y="2.91" 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="-.25" dy=".5"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.909804 0 0 0 0 0.909804 0 0 0 0 0.92549 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_26637"/><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=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.517647 0 0 0 0 0.513726 0 0 0 0 0.552941 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_26637" result="effect2_innerShadow_18_26637"/></filter><filter id="i8hZGBe" width="13.163" height="22.526" x="9.281" y="4.668" 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="-.25"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.392157 0 0 0 0 0.380392 0 0 0 0 0.447059 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_26637"/></filter><filter id="iKPaWod" width="7.041" height="1.037" x="12.354" y="12.273" 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="-.25" dy=".25"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.392157 0 0 0 0 0.380392 0 0 0 0 0.447059 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_26637"/></filter><filter id="iHljDJd" width="5.501" height="1.037" x="13.124" y="14.738" 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="-.25" dy=".25"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.392157 0 0 0 0 0.380392 0 0 0 0 0.447059 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_26637"/></filter><filter id="icKv9eu" width="3.269" height="1.037" x="11.706" y="17.203" 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="-.25" dy=".25"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.392157 0 0 0 0 0.380392 0 0 0 0 0.447059 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_26637"/></filter><filter id="iJQNdkb" width="4.705" height="1.037" x="15.27" y="17.203" 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="-.25" dy=".25"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.392157 0 0 0 0 0.380392 0 0 0 0 0.447059 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_26637"/></filter><radialGradient id="imqlFjf" cx="0" cy="0" r="1" gradientTransform="matrix(-8.07812 0 0 -.39063 22.026 25.516)" gradientUnits="userSpaceOnUse"><stop offset=".067" stop-color="#DDD9E4"/><stop offset="1" stop-color="#DDD9E4" stop-opacity="0"/></radialGradient><radialGradient id="i7t7HFv" cx="0" cy="0" r="1" gradientTransform="matrix(0 2.21875 -14.5324 0 22.916 28.063)" gradientUnits="userSpaceOnUse"><stop stop-color="#A9F2A1"/><stop offset="1" stop-color="#8FD99F" 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. HeadstoneIcon.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.