Skip to content

Lateral Icon

The Lateral-icon icon represents a type of icon or symbol used in lateral navigation or menu components.

Add shadcn.io to your AI agent. · Pro It installs Lateral Icon, or any of 294k icons, from a prompt, with Pro.

Set up MCP

Exports at 24 × 24 px

Lateral Icon icon from SVG Logos
Get Pro

2,063 in SVG LogosCC0 license (opens in a new tab)Free to copy and download

Code

Lateral Icon in your framework

In any framework. Customize it above, and the code follows.

export const LateralIconIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256" fill="none" stroke="currentColor" {...props}>
    <defs><linearGradient id="SVGf9nOE0Cp" x1="0%" x2="37.75%" y1="73.25%" y2="36.583%"><stop offset="0%" stopColor="#0060FF"/><stop offset="100%" stopColor="#1F66D6"/></linearGradient><linearGradient id="SVG12RJyd9d" x1="34.722%" x2="92.014%" y1="0%" y2="90.75%"><stop offset="0%" stopColor="#1F6AE2"/><stop offset="100%" stopColor="#2E7BED"/></linearGradient><linearGradient id="SVGyqjyJLtk" x1="76.5%" x2="0%" y1="48.265%" y2="54.819%"><stop offset="0%" stopColor="#0D57D9"/><stop offset="100%" stopColor="#0D57D9"/></linearGradient><path id="SVGJ0Odib0g" d="M234.667 256V0H0l192 256z"/><path id="SVGkOAiPUNV" d="M186.453 0L0 52.693v38.4h256V73.6z"/><circle id="SVGMFHNZdYm" cx="128" cy="128" r="128"/></defs><mask id="SVGalfYF1HT" fill="#fff"><use href="#SVGMFHNZdYm"/></mask><g mask="url(#SVGalfYF1HT)"><path fill="url(#SVGf9nOE0Cp)" d="M378.169 325.99v-256h-256v255.787z" transform="translate(-122.169 -69.99)"/><path fill="#115EDE" 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="#115EDE" 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(#SVG12RJyd9d)" 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="SVGty7o4bzD" fill="#fff"><use href="#SVGJ0Odib0g"/></mask><g fill="#3582F7" mask="url(#SVGty7o4bzD)"><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(#SVGyqjyJLtk)" stroke="#0D57D9" 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="SVGPaGHpcTp" fill="#fff"><use href="#SVGkOAiPUNV"/></mask><g fill="#1362DD" mask="url(#SVGPaGHpcTp)"><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="#6AABD4" d="m98.133 45.227l-11.52 65.707l42.24 22.613z"/><path fill="#E4F6FE" d="M169.386 110.934L98.133 45.227l30.72 88.32z"/><path fill="#A8CCE9" d="m169.386 110.934l-40.533 22.613l80.64 47.36z"/><path fill="#D8E9F8" d="m209.493 180.907l-80.64-47.36l39.253 64.853z"/><path fill="#84C1F2" d="m168.106 198.4l-39.253-64.853l-81.92 47.36z"/><path fill="#AECEE9" d="m46.933 180.907l81.92-47.36l-42.24-22.613z"/>
  </svg>
);

SVG Logos

Icons that share its tags, in the same style.

  • Rush Icon icon from SVG Logos
  • Unito Icon icon from SVG Logos
  • Ampersand icon from SVG Logos
  • Imba Icon icon from SVG Logos
  • Invision Icon icon from SVG Logos
  • Lateral icon from SVG Logos
  • Tectonic icon from SVG Logos
  • Ant Design icon from SVG Logos
  • Close icon from SVG Logos
  • Element icon from SVG Logos
  • Flat Ui icon from SVG Logos
  • Glint icon from SVG Logos
  • Glitch Icon icon from SVG Logos
  • Gnome Icon icon from SVG Logos
  • Gnupg Icon icon from SVG Logos
  • Invision icon from SVG Logos
  • Mockflow Icon icon from SVG Logos
  • Naiveui icon from SVG Logos
  • Percy Icon icon from SVG Logos
  • Perplexity Icon icon from SVG Logos
  • 6px icon from SVG Logos
  • Dojo Icon icon from SVG Logos
  • Eager icon from SVG Logos
  • Headlessui Icon icon from SVG Logos

Skip the copy and paste. With Pro, your AI agent finds and installs any SVG Logos icon from a prompt.

Get Pro

Tags

Browse by tag

Lateral Icon is tagged UI, interface, UX and 2 more. Related tags follow; each opens its icons from every library.

Pricing

SVG Logos MCP, with Pro

Ask for Lateral Icon or any of 2,063 SVG Logos icons and your agent installs it. The MCP comes with every Pro plan, with 6,000+ blocks and 14 premium templates. The icons stay free.

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
  • Complete multi-page sites you can ship as they are.Templates: All 14 templates
  • React icons from every major library, installable with one command.React icons: 294k+ icons
  • Presets that restyle every block, in light and dark.Themes: All 59 themes
  • Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Lets your AI editor search, preview and install blocks for you.MCP server: High usage
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

FAQ

Frequently asked questions

What the Lateral Icon icon means and where it's used, then how to install, style and license it.

Install Lateral Icon from a prompt

MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.

Get Pro