<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGGNuHoiPd)" d="M12.475 13.707V9.453l.46.114l.61 1.151h3.06l-.17 1.014a2.56 2.56 0 0 0-1.094-.303c-.446 0-.839.288-.981.435v1.383l-.303.242l-1.26.407z"/><path fill="url(#SVGqOvEZcyF)" d="m12.887 9.661l-.412-.218l.156-.151h1.516l.204.27v.582l.88-.852h1.27l.237.364v1.706l-.303.364l-.176-.364l-.312-.663l-1.734-.247l-1.326-.796z"/><path fill="#818cf8" d="M12.749 13.26V9.58l.379-.096h.81l.237.095v.692h.511l.725-.791h.853l.175.246v1.464l-.18.19c-.085-.1-.384-.309-.9-.309c-.744 0-1.094.46-1.184.687v1.203l-1.052.483l-.374-.189z"/><path fill="#818cf8" d="M6.837 10.835H4.374c.066.407-.128.512-.128.625c.673 1.019-.142 1.923-.677 2.71c1.956 1.378 1.999 3.282 2.093 3.514c.711-.866 1.422-2.974 1.422-3.903c0-.743-.166-2.273-.252-2.946z"/><path fill="url(#SVGHhZBHdcl)" d="m6.364 16.452l.294-1.819c-.218-.36-.768-1.212-1.208-1.212s-1.137.54-1.426.739h-.455l-.005.01a4.88 4.88 0 0 1 2.051 3.305q.016.106.048.209c.246-.299.488-.744.706-1.232z"/><path fill="url(#SVGJ0l5bczm)" d="M4.507 10.835c.17.308.389.862.389 1.497c0 .781-.588 1.549-.872 1.833H3.55l.176-.251c.355-.498.682-1.052.696-1.639c.01-.265.005-.54-.175-.815c0-.038.019-.07.042-.113c.052-.095.133-.232.08-.512h.143z"/><path fill="url(#SVGbiIflcZR)" d="m6.945 11.839l-.63 1.26c0 1.032.043 3.424-.663 4.57l.01.015c.71-.867 1.42-2.975 1.42-3.903c0-.474-.066-1.256-.137-1.942"/><path fill="url(#SVGJs1xHdax)" d="M5.62 17.51a3.83 3.83 0 0 0-1.592-3.344h-.483a5.14 5.14 0 0 1 2.07 3.32v.024z"/><path fill="url(#SVGsmEwEbya)" d="M5.445 9.462a5.5 5.5 0 0 1-2.415-.095c-.161.753.374 1.582.663 1.904c.08-.137.293-.412.497-.412c.2 0 .422.275.507.412c.066-.118.332-.35.872-.35c.535 0 .828.208.909.312c.118-.151.455-.46.824-.46c.46 0 .753.342.91.498c-.105-2.155-1.388-2.056-2.767-1.81"/><path fill="#818cf8" d="M6.62 6.316c-.246 0-.672.35-.852.52l.79.815c.237-.142.72-.473.72-.71c0-.294-.35-.625-.658-.625"/><path fill="#818cf8" d="M6.79 7.832L5.77 6.79l-.696.701l.142.133l-.142.204h-.18v1.804c.275-.033.947-.132 1.44-.236c-.052-1.09.284-1.502.455-1.568z"/><path fill="url(#SVGqdYEjdWT)" d="m6.316 10.22l-.786-.587l-.635.767l.8.654z"/><path fill="url(#SVGEL5kBdnW)" d="M4.715 11.243c.01-.27-.066-.663-.454-.663c-.332 0-.512.36-.588.673l.015.018c.085-.118.298-.35.502-.35c.199 0 .421.237.506.35l.02-.023z"/><path fill="url(#SVGr3QlGchJ)" d="M8.164 11.229c-.095-.256-.356-.649-.782-.649c-.346 0-.64.308-.8.545c.16-.142.426-.308.72-.308c.416 0 .696.256.862.407z"/><path fill="url(#SVG1bZpbbjB)" d="m3.602 11.168l.346-.635l-.943-.744c.048.545.36 1.075.597 1.374z"/><path fill="url(#SVG451TCd2u)" d="M8.21 10.675V9.576l3.402.157l.275 2.326l-.123 1.653c-.143-.053-.664-.161-1.597-.161c-.928 0-1.501.232-1.672.345l-.284-.27V12.06c.052-.128.284-.417.81-.555c.658-.17.961-.35.961-.568c0-.213-.118-.417-.691-.417c-.46 0-.758.208-.853.313z"/><path fill="#818cf8" d="M9.158 9.158c-.587 0-.876.275-.947.412l2.146.616l1.198 2.761l.213.725l.232-.204v-3.287c0-.597-.62-.933-.928-1.023z"/><path fill="#818cf8" d="M8.444 9.632v.753c.095-.066.407-.194.905-.194c.63 0 .9.19.9.687c0 .493-.27.582-.9.701c-.498.095-.735.355-.787.474v1.217c.024.057.095.17.161.17c.479-.246 2.16-.217 2.942-.17v-3.131c0-.246-.526-.805-1.686-.805c-.934 0-1.412.194-1.535.293z"/><path fill="url(#SVGtv1glbzv)" d="M17.21 10.675V9.576l3.401.157l.275 2.326l-.123 1.653c-.142-.053-.663-.161-1.596-.161c-.929 0-1.502.232-1.672.345l-.285-.27V12.06c.052-.128.285-.417.81-.555c.659-.17.962-.35.962-.568c0-.213-.118-.417-.692-.417c-.46 0-.758.208-.852.313z"/><path fill="#818cf8" d="M18.158 9.158c-.588 0-.876.275-.948.412l2.146.616l1.199 2.761l.213.725l.232-.204v-3.287c0-.597-.62-.933-.929-1.023z"/><path fill="#818cf8" d="M17.442 9.632v.753c.095-.066.408-.194.905-.194c.63 0 .9.19.9.687c0 .493-.27.582-.9.701c-.497.095-.734.355-.786.474v1.217c.023.057.095.17.16.17c.48-.246 2.16-.217 2.942-.17v-3.131c0-.246-.525-.805-1.686-.805c-.933 0-1.411.194-1.535.293z"/><path fill="url(#SVGyUkUtefb)" d="m7.263 15.377l1-1.009h9.369l.999 1.01v1.074l-1.34 1.232H8.603l-1.34-1.232z"/><path fill="#818cf8" d="M7.454 16.363v-.9l.89-.9h9.208l.89.9v.9l-1.221 1.123H8.676z"/><path fill="url(#SVGk8nv5cgA)" d="M9.158 14.843h-.474v2.368h1.421v-.473h-.947z"/><path fill="url(#SVGNP0uIdPQ)" d="m11.26 14.843l-.682 2.368h.535l.412-1.44l.413 1.44h.535l-.682-2.368z"/><path fill="url(#SVGJ68Nmbxx)" d="m13.413 14.843l1.43 1.307v-1.307h.474v2.368h-.384l-1.511-1.369v1.37h-.474v-2.37z"/><path fill="url(#SVGccGRtbEx)" fill-rule="evenodd" d="M16.505 14.843h-.715v2.368h.715a1.184 1.184 0 1 0 0-2.368m-.004.473h-.237v1.422h.237a.71.71 0 0 0 0-1.422" clip-rule="evenodd"/><defs><linearGradient id="SVGGNuHoiPd" x1="16.293" x2="12.508" y1="11.997" y2="11.997" gradientUnits="userSpaceOnUse"><stop offset=".42" stop-color="#af764b"/><stop offset=".56" stop-color="#f7f4ef"/><stop offset=".64" stop-color="#af7239"/><stop offset=".89" stop-color="#896d57"/><stop offset="1" stop-color="#7a7975"/></linearGradient><linearGradient id="SVGqOvEZcyF" x1="16.738" x2="12.475" y1="10.519" y2="10.519" gradientUnits="userSpaceOnUse"><stop offset=".27" stop-color="#f3f3f3"/><stop offset=".42" stop-color="#88857c"/><stop offset=".67" stop-color="#cecac7"/></linearGradient><linearGradient id="SVGHhZBHdcl" x1="5.113" x2="5.113" y1="13.568" y2="17.684" gradientUnits="userSpaceOnUse"><stop stop-color="#bfbfbf"/><stop offset="1" stop-color="#b9b1ab"/></linearGradient><linearGradient id="SVGJ0l5bczm" x1="4.223" x2="4.223" y1="10.835" y2="14.165" gradientUnits="userSpaceOnUse"><stop stop-color="#7c8280"/><stop offset="1" stop-color="#a4a5a7"/></linearGradient><linearGradient id="SVGbiIflcZR" x1="6.372" x2="6.372" y1="11.839" y2="17.684" gradientUnits="userSpaceOnUse"><stop stop-color="#e8e8ed"/><stop offset="1" stop-color="#f3f5ea"/></linearGradient><linearGradient id="SVGJs1xHdax" x1="4.601" x2="4.601" y1="14.237" y2="17.51" gradientUnits="userSpaceOnUse"><stop stop-color="#7f7366"/><stop offset="1" stop-color="#c2a963"/></linearGradient><linearGradient id="SVGsmEwEbya" x1="5.479" x2="5.602" y1="9.339" y2="11.271" gradientUnits="userSpaceOnUse"><stop offset=".08" stop-color="#e1c08d"/><stop offset=".15" stop-color="#9d7126"/><stop offset=".42" stop-color="#8c5012"/></linearGradient><linearGradient id="SVGqdYEjdWT" x1="5.989" x2="5.193" y1="9.893" y2="10.646" gradientUnits="userSpaceOnUse"><stop stop-color="#eca0b2"/><stop offset=".32" stop-color="#cb7493"/><stop offset=".53" stop-color="#73001e"/><stop offset=".72" stop-color="#6c0425"/><stop offset="1" stop-color="#fd67b4"/></linearGradient><linearGradient id="SVGEL5kBdnW" x1="3.669" x2="4.715" y1="11.068" y2="11.129" gradientUnits="userSpaceOnUse"><stop stop-color="#896322"/><stop offset="1" stop-color="#c99f4b"/></linearGradient><linearGradient id="SVGr3QlGchJ" x1="6.582" x2="8.159" y1="11.04" y2="11.191" gradientUnits="userSpaceOnUse"><stop stop-color="#896322"/><stop offset="1" stop-color="#c99f4b"/></linearGradient><linearGradient id="SVG1bZpbbjB" x1="3.849" x2="3.583" y1="9.694" y2="11.239" gradientUnits="userSpaceOnUse"><stop offset=".31" stop-color="#6b3b04"/><stop offset="1" stop-color="#c3942c"/></linearGradient><linearGradient id="SVG451TCd2u" x1="10.049" x2="10.049" y1="9.576" y2="13.896" gradientUnits="userSpaceOnUse"><stop offset=".09" stop-color="#7d7975"/><stop offset=".26" stop-color="#bb802d"/><stop offset=".43" stop-color="#ccc8c4"/><stop offset=".61" stop-color="#85867b"/><stop offset=".76" stop-color="#79787d"/><stop offset=".93" stop-color="#a9814e"/></linearGradient><linearGradient id="SVGtv1glbzv" x1="19.048" x2="19.048" y1="9.576" y2="13.896" gradientUnits="userSpaceOnUse"><stop offset=".09" stop-color="#7d7975"/><stop offset=".26" stop-color="#bb802d"/><stop offset=".43" stop-color="#ccc8c4"/><stop offset=".61" stop-color="#85867b"/><stop offset=".76" stop-color="#79787d"/><stop offset=".93" stop-color="#a9814e"/></linearGradient><linearGradient id="SVGyUkUtefb" x1="12.947" x2="12.947" y1="14.567" y2="17.485" gradientUnits="userSpaceOnUse"><stop offset=".54" stop-color="#281c1e"/><stop offset=".66" stop-color="#70614a"/></linearGradient><linearGradient id="SVGk8nv5cgA" x1="9.395" x2="9.395" y1="14.843" y2="17.211" gradientUnits="userSpaceOnUse"><stop stop-color="#d7922b"/><stop offset=".92" stop-color="#a47316"/><stop offset=".97" stop-color="#dab15f"/></linearGradient><linearGradient id="SVGNP0uIdPQ" x1="11.525" x2="11.525" y1="14.843" y2="17.211" gradientUnits="userSpaceOnUse"><stop stop-color="#d7922b"/><stop offset=".92" stop-color="#a47316"/><stop offset=".97" stop-color="#dab15f"/></linearGradient><linearGradient id="SVGJ68Nmbxx" x1="14.133" x2="14.133" y1="14.843" y2="17.211" gradientUnits="userSpaceOnUse"><stop stop-color="#d7922b"/><stop offset=".92" stop-color="#a47316"/><stop offset=".97" stop-color="#dab15f"/></linearGradient><linearGradient id="SVGccGRtbEx" x1="16.742" x2="16.742" y1="14.843" y2="17.211" gradientUnits="userSpaceOnUse"><stop stop-color="#d7922b"/><stop offset=".92" stop-color="#a47316"/><stop offset=".97" stop-color="#dab15f"/></linearGradient></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. FaraIcon.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.