Home/Libraries/SVG Logos (Iconify)/lateral-icon

SVG Logos (Iconify)

LateralIcon

License: CC0-1.0Commercial Safe

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 256 256"><defs><linearGradient id="SVGsrDXVdgl" x1="0%" x2="37.75%" y1="73.25%" y2="36.583%"><stop offset="0%" stop-color="#0060ff"/><stop offset="100%" stop-color="#1f66d6"/></linearGradient><linearGradient id="SVGqnCcz4uP" x1="34.722%" x2="92.014%" y1="0%" y2="90.75%"><stop offset="0%" stop-color="#1f6ae2"/><stop offset="100%" stop-color="#2e7bed"/></linearGradient><linearGradient id="SVGw5CaNbtZ" x1="76.5%" x2="0%" y1="48.265%" y2="54.819%"><stop offset="0%" stop-color="#0d57d9"/><stop offset="100%" stop-color="#0d57d9"/></linearGradient><path id="SVGJnEnXbOy" d="M234.667 256V0H0l192 256z"/><path id="SVGjU6XLbts" d="M186.453 0L0 52.693v38.4h256V73.6z"/><circle id="SVGN5eQqeMK" cx="128" cy="128" r="128"/></defs><mask id="SVGMX2wGdvm" fill="#818cf8"><use href="#SVGN5eQqeMK"/></mask><g mask="url(#SVGMX2wGdvm)"><path fill="url(#SVGsrDXVdgl)" d="M378.169 325.99v-256h-256v255.787z" transform="translate(-122.169 -69.99)"/><path fill="#818cf8" d="m-112.514 120.985l181.02-181.02l.904.906l-181.019 181.019zm15.385 15.387l181.02-181.02l.905.906l-181.02 181.02zm15.388 15.388L99.279-29.26l.904.905l-181.02 181.02zm15.386 15.385l181.02-181.02l.904.906l-181.02 181.02zm15.386 15.387l181.02-181.02l.905.906l-181.02 181.02zm15.388 15.388L145.439 16.9l.904.905l-181.02 181.02zm15.386 15.385l181.02-181.02l.904.906l-181.02 181.02zm15.386 15.387l181.02-181.02l.905.906l-181.02 181.02zm15.388 15.386l181.02-181.02l.904.906l-181.02 181.02zm15.386 15.387l181.02-181.02l.904.906l-181.02 181.02z"/><path fill="#818cf8" d="m-122.169 84.782l.904-.905l181.02 181.02l-.906.905zm15.386-15.387l.905-.905L75.141 249.51l-.906.904zm15.388-15.386l.905-.905l181.02 181.02l-.906.904zm15.386-15.387l.905-.905l181.02 181.02l-.906.904zm15.387-15.387l.905-.905l181.02 181.02l-.906.904zm15.386-15.386l.905-.905l181.02 181.02l-.906.904zm15.387-15.387l.904-.905l181.02 181.02l-.906.905zm15.387-15.387l.905-.905l181.02 181.02l-.906.904zM.924-38.311l.905-.905l181.02 181.02l-.906.904zm15.387-15.387l.905-.905l181.02 181.02l-.906.904zm15.386-15.387l.904-.905l181.02 181.02l-.906.904z"/><path fill="url(#SVGqnCcz4uP)" d="M378.169 325.99v-256H143.502l192 256z" transform="translate(-122.169 -69.99)"/><g transform="translate(-122.169 -69.99) translate(143.502 69.99)"><mask id="SVGQPSXy09b" fill="#818cf8"><use href="#SVGJnEnXbOy"/></mask><g fill="#818cf8" mask="url(#SVGQPSXy09b)"><path d="m-52.972 40.373l181.02-181.02l.904.906L-52.067 41.278zM100.893 194.24l181.02-181.02l.905.906l-181.02 181.02zM-37.587 55.76l181.02-181.02l.905.906l-181.02 181.02zm153.868 153.868l181.02-181.02l.904.905l-181.02 181.02zm-138.48-138.48l181.02-181.02l.904.905l-181.02 181.02zm153.866 153.865l181.02-181.02l.904.906l-181.02 181.02zM-6.812 86.533l181.02-181.02l.904.906L-5.907 87.438zM147.053 240.4l181.02-181.02l.905.906l-181.02 181.02zM8.573 101.92L189.593-79.1l.905.906l-181.02 181.02zm153.868 153.866l181.02-181.02l.904.906l-181.02 181.02zM23.961 117.308l181.02-181.02l.904.905l-181.02 181.02zm153.866 153.865l181.02-181.02l.904.906l-181.02 181.02zm-138.48-138.48l181.02-181.02l.904.906l-181.02 181.02zM193.213 286.56l181.02-181.02l.905.906l-181.02 181.02zM54.733 148.08l181.02-181.02l.905.906l-181.02 181.02zm153.868 153.866l181.02-181.02l.904.906l-181.02 181.02zm-138.48-138.48l181.02-181.02l.904.906l-181.02 181.02zm153.866 153.867l181.02-181.02l.904.906l-181.02 181.02zm-138.48-138.48l181.02-181.02l.904.906l-181.02 181.02z"/><path d="m-62.627 4.169l.905-.905l332.17 332.17l-.904.906zm15.387-15.386l.905-.905l332.17 332.17l-.904.906zm15.387-15.388l.905-.905l332.17 332.17l-.905.906zm15.386-15.386l.905-.905l332.17 332.17l-.904.906zm15.386-15.387l.905-.905l332.17 332.17l-.904.906zm15.387-15.386l.905-.905l332.17 332.17l-.904.906zm15.387-15.387l.904-.905l332.17 332.17l-.904.906zm15.386-15.386l.905-.905l332.17 332.17l-.904.906zm15.387-15.387l.905-.905l332.17 332.17l-.905.905zm15.387-15.387l.905-.905l332.17 332.17l-.904.906zm15.386-15.386l.905-.905l332.17 332.17l-.904.906z"/></g></g><path fill="url(#SVGw5CaNbtZ)" stroke="#818cf8" d="M308.622 234.897L122.169 287.59v38.4h256v-17.493z" transform="translate(-122.169 -69.99)"/><g transform="translate(-122.169 -69.99) translate(122.169 234.897)"><mask id="SVG40BEgcLG" fill="#818cf8"><use href="#SVGjU6XLbts"/></mask><g fill="#818cf8" mask="url(#SVG40BEgcLG)"><path d="M-92.725 73.628L398.19-71.789l.727 2.454L-91.998 76.082zm12.36 41.728L410.552-30.06l.727 2.454l-490.916 145.417zm12.36 41.728L422.912 11.668l.727 2.454l-490.916 145.416zm12.36 41.727L435.271 53.396l.727 2.454l-490.915 145.416z"/><path d="m-75.143.781l2.454-.727L72.727 490.969l-2.454.727zm41.728-12.36l2.454-.727l145.416 490.915l-2.454.727zm41.727-12.36l2.454-.727l145.416 490.915l-2.454.727zM50.04-36.301l2.454-.727L197.91 453.887l-2.454.727zm41.728-12.36l2.454-.727l145.416 490.915l-2.454.727zm41.727-12.36l2.454-.727l145.416 490.915l-2.454.727zm41.728-12.36l2.454-.727l145.416 490.915l-2.454.727zm41.728-12.361l2.454-.727l145.416 490.915l-2.454.727z"/></g></g></g><path fill="#818cf8" d="m98.133 45.227l-11.52 65.707l42.24 22.613z"/><path fill="#818cf8" d="M169.386 110.934L98.133 45.227l30.72 88.32z"/><path fill="#818cf8" d="m169.386 110.934l-40.533 22.613l80.64 47.36z"/><path fill="#818cf8" d="m209.493 180.907l-80.64-47.36l39.253 64.853z"/><path fill="#818cf8" d="m168.106 198.4l-39.253-64.853l-81.92 47.36z"/><path fill="#818cf8" d="m46.933 180.907l81.92-47.36l-42.24-22.613z"/></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. LateralIconIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC0-1.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.