---
schema_version: "1"
id: 65024b0b6f066093ca69bef64117490f945ad47dc46f7a2ae567df31fbde8516
title: Vertical Navigation Item Icon
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/verticalNavigationItemIcon/lightning-vertical-navigation-item-icon.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-vertical-navigation-item-icon.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: d1eb91e86f4048270ef3187375ba4a5cbcee718883028cf033a7fa6119778d08
products:
  - Lightning Component Reference
---

# Vertical Navigation Item Icon

**`lightning-vertical-navigation-item-icon`**

A link and icon within lightning-vertical-navigation-section or lightning-vertical-navigation-overflow.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="verticalNavigationItemIcon" model="lwc" namespace="lightning"}


:::::

:::::tab

A `lightning-vertical-navigation-item-icon` component is a navigation item that displays an icon to the left of the item label.

Here's an example that creates a navigation menu with icons on the navigation items.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-vertical-navigation>
        <lightning-vertical-navigation-section label="Reports">
            <lightning-vertical-navigation-item-icon
                label="Recent"
                name="recent"
                icon-name="utility:clock"
            >
            </lightning-vertical-navigation-item-icon>
            <lightning-vertical-navigation-item-icon
                label="Created by Me"
                name="created"
                icon-name="utility:user"
            >
            </lightning-vertical-navigation-item-icon>
            <lightning-vertical-navigation-item label="All Reports" name="all">
            </lightning-vertical-navigation-item>
        </lightning-vertical-navigation-section>
    </lightning-vertical-navigation>
</template>
```
<!-- prettier-ignore-end -->

Icons from the Lightning Design System are supported. Visit [https://lightningdesignsystem.com/icons](https://lightningdesignsystem.com/icons) to view available icons.

When applying Lightning Design System classes or icons, check that they are available in the
Lightning Design System release tied to your org. The latest Lightning Design System
resources become available only when the new release is available in your org.


:::::

:::::tab
::component-specification{component="verticalNavigationItemIcon" model="lwc" namespace="lightning"}

:::::

::::::