Home/Libraries/Freehand free icons (Iconify)/hierarchy-web

Freehand free icons (Iconify)

HierarchyWeb

License: CC-BY-4.0

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"><path fill="#818cf8" fill-rule="evenodd" d="M1.642 9.013a3.14 3.14 0 0 0 1.933.14a2 2 0 0 0 1.316-1.247a2.59 2.59 0 0 0-.33-2.381a2.06 2.06 0 0 0-1.335-.778a2.61 2.61 0 0 0-2.8 1.405a2.75 2.75 0 0 0 .18 1.864c.209.45.578.805 1.036.997m-.449-2.641a1.435 1.435 0 0 1 1.834-.837c.305.06.576.235.757.488c.207.37.26.806.15 1.216a1 1 0 0 1-.658.777c-.327.08-.67.08-.996 0a1.15 1.15 0 0 1-.758-.468a1.65 1.65 0 0 1-.329-1.176m17.779-1.535a2 2 0 0 0-.22.22a11 11 0 0 0-.906 1.165l-.588.897s-.25.21-.279.309a3.7 3.7 0 0 0-1.176-.409a4.83 4.83 0 0 0-4.694 1.884l-.11-.06l-1.195-.618q-.706-.233-1.435-.368a12 12 0 0 0-1.465-.1l-.748-.2a.339.339 0 0 0-.248.57a.36.36 0 0 0 .218.118c0 .09.21.15.35.22q.145.083.308.129c.468.11.907.269 1.365.379c.459.11.907.17 1.376.279l1.166.249h.11v.08a4.98 4.98 0 0 0 .308 3.418q.22.431.548.787l.529.468q.32.231.677.4a5 5 0 0 0 1.655.358h.777q.506-.04.996-.17a3.38 3.38 0 0 0 1.695-1.195c.11.12.289.358.558.657a2 2 0 0 0 .249.26q.21.179.418.328c.897.24.997-.17.937-.697l-.18-.2a3 3 0 0 0-.418-.328l-.329-.18a9 9 0 0 0-.817-.369c.184-.351.318-.727.399-1.116a4.86 4.86 0 0 0-.658-3.597a2.8 2.8 0 0 0-.538-.588l.22-.18l.926-.787c.279-.349.608-.688.907-1.056c.1-.11.19-.23.279-.35c.269-.976.03-1.235-.967-.607M14.438 15.65v1.066c0 .21.09.618.14.927s.946.548.996.09s0-.718 0-1.077a5 5 0 0 0-.06-.657a4 4 0 0 0-.11-.439c-.14-.399-.877-.309-.966.09m-3.648-1.286l-.299.19c-.458.278-.917.538-1.365.837s-.877.597-1.296.916c-.817.678-1.654 1.356-2.441 2.063l-.25.22c-.916.996-.677 1.166.49.727l.388-.24c.508-.378.996-.727 1.544-1.095c.549-.37.997-.738 1.515-1.117c.668-.518 1.306-1.056 1.993-1.574l.33-.27c.268-.657.089-.866-.609-.657m6.906-2.591a2.58 2.58 0 0 1-1.714 1.993a4.45 4.45 0 0 1-2.272 0a2.55 2.55 0 0 1-1.714-1.186a4 4 0 0 1-.468-2.74c.468-1.864 2.67-2.372 4.096-1.993a2.53 2.53 0 0 1 1.684 1.106c.472.86.61 1.864.389 2.82m-3.01 6.497a2.7 2.7 0 0 0-.997.08a1.99 1.99 0 0 0-1.495 1.336a2.73 2.73 0 0 0 .28 1.993a2.06 2.06 0 0 0 1.096.907a3.1 3.1 0 0 0 1.903 0c.41-.125.762-.39.997-.748c.195-.337.308-.716.329-1.106a.35.35 0 0 0-.33-.368a.337.337 0 0 0-.368.318a1.36 1.36 0 0 1-.289.698a1 1 0 0 1-.568.339a2.26 2.26 0 0 1-1.066-.09a1.08 1.08 0 0 1-.678-.538a1.6 1.6 0 0 1-.2-1.086a1.1 1.1 0 0 1 .718-.738a1.8 1.8 0 0 1 .997-.15c.33.025.639.179.857.43a.31.31 0 0 0 .508-.34a1.74 1.74 0 0 0-.837-.717zm8.6-17.42a2.06 2.06 0 0 0-1.325-.807a2.6 2.6 0 0 0-2.8 1.396a2.65 2.65 0 0 0 .189 1.873c.133.273.328.512.568.698l.777.369c.53.133 1.085.133 1.615 0a2 2 0 0 0 1.305-1.147a2.59 2.59 0 0 0-.329-2.381m-.628 1.735a.93.93 0 0 1-.657.737a2.2 2.2 0 0 1-.997 0a1.15 1.15 0 0 1-.757-.468c-.857-1.286.14-2.372 1.564-1.993c.3.069.56.25.728.508c.192.375.235.81.12 1.216M4.402 20.294l-.518-.489a2.3 2.3 0 0 0-.857-.308a2.59 2.59 0 0 0-2.79 1.405a2.58 2.58 0 0 0 .209 1.863c.194.447.55.803.996.997a3.18 3.18 0 0 0 1.994.14a2 2 0 0 0 1.325-1.216a2.58 2.58 0 0 0-.359-2.392m-.638 1.674a.93.93 0 0 1-.667.737a2.16 2.16 0 0 1-.997 0a1.12 1.12 0 0 1-.757-.468a1.68 1.68 0 0 1-.31-1.126a1.394 1.394 0 0 1 1.855-.827c.298.07.559.252.727.508c.197.359.25.78.15 1.176m19.682-7.245a1.58 1.58 0 0 0-.837-.548a2.27 2.27 0 0 0-1.994.498l-.408.757c-.07.425-.018.86.15 1.256c.167.347.453.623.807.777a2.48 2.48 0 0 0 1.524.12a1.57 1.57 0 0 0 1.057-.997a2.04 2.04 0 0 0-.3-1.863m-.718 1.315a.53.53 0 0 1-.378.419c-.22.05-.448.05-.668 0a.66.66 0 0 1-.469-.26a1 1 0 0 1-.229-.767c.1-.528.708-.677 1.226-.528c.19.047.354.165.458.33a1 1 0 0 1 .06.806" clip-rule="evenodd"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

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. HierarchyWebIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC-BY-4.0** 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.