---
title: "ZingGrid Web Component: `<zg-icon>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-icon>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/v1/api/tags/zg-icon
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/tags/zg-icon.md
mode: provenance
representation: markdown
origin_response_id: 5daa21f9080e862e95ff8e4ec19a441c
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.767Z
version_nonce: a6debb2f2aa1266d8df9276bb0dbbb5d
generated_at_utc: 2026-10-31T01:14:18.385Z
response_nonce: 60f07e6cfc273907f1cf5d34edf3d39b
```

# `<zg-icon>`

Version 1

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/zg-icon--docs)

The `<zg-icon>` tag is a web component that controls the styling and display of icons in the grid.

![Image of the DOM relationship for the zg-icon web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/zg-icon-web-component-dom.png "Image of the DOM relationship for the zg-icon web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGCaption](https://www.zinggrid.com/docs/api/tags/zg-caption) | Parent | Manual | n/a |
| [ZGCard](https://www.zinggrid.com/docs/api/tags/zg-card) | Parent | Manual | n/a |
| [ZGCell](https://www.zinggrid.com/docs/api/tags/zg-cell) | Parent | Generated | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body) |
| [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Parent | Generated | n/a |
| [ZGColumn](https://www.zinggrid.com/docs/api/tags/zg-column) | Parent | Manual | n/a |
| [ZGDialog](https://www.zinggrid.com/docs/api/tags/zg-dialog) | Parent | Manual | n/a |
| [ZGFooter](https://www.zinggrid.com/docs/api/tags/zg-footer) | Parent | Manual | n/a |
| [ZGHeadCell](https://www.zinggrid.com/docs/api/tags/zg-head-cell) | Parent | Generated | n/a |
| [ZGLoadMask](https://www.zinggrid.com/docs/api/tags/zg-load-mask) | Parent | Manual | n/a |
| [ZGMenu](https://www.zinggrid.com/docs/api/tags/zg-menu) | Parent | Manual | n/a |
| [ZGMenuGroup](https://www.zinggrid.com/docs/api/tags/zg-menu-group) | Parent | Generated | n/a |
| [ZGNoData](https://www.zinggrid.com/docs/api/tags/zg-no-data) | Parent | Manual | n/a |
| [ZGPager](https://www.zinggrid.com/docs/api/tags/zg-pager) | Parent | Manual | n/a |
| [ZGSource](https://www.zinggrid.com/docs/api/tags/zg-source) | Parent | Manual | n/a |

#### Related Web Components

- [`<zg-button>`](https://www.zinggrid.com/docs/api/tags/zg-button/)
- [`<zg-checkbox>`](https://www.zinggrid.com/docs/api/tags/zg-checkbox/)
- [`<zg-column>`](https://www.zinggrid.com/docs/api/tags/zg-column/)
- [`<zg-pager>`](https://www.zinggrid.com/docs/api/tags/zg-pager/)
- [`<zg-menu>`](https://www.zinggrid.com/docs/api/tags/zg-menu/)
- [`<zg-control-bar>`](https://www.zinggrid.com/docs/api/tags/zg-control-bar/)
- [`<zg-head-cell>`](https://www.zinggrid.com/docs/api/tags/zg-head-cell/)

## Usage

A `<zg-icon>` tag can be manually inserted inside the grid as slotted content.

```html
<zing-grid>
	<zg-icon name="checkmark"></zg-icon>
	<zg-icon name="submitrecord"></zg-icon>
</zing-grid>
```

## Attributes

Use the `name` attribute to determine the icon's type.

**Example Usage**

```html
<zing-grid
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-icon renderer="fncCallAfterTemplateTagInserted">
    <!-- Optional template tag -->
    <template>
      <h3>[[record.name]]</h3>
      <code>[[record.job]]</code>
    </template>
  </zg-icon>
</zing-grid>
```

### name

Sets the icon type of `<zg-icon>`

- Type: String
- Default: `""`
- Accepted values: "batchedit", "batcheditcancel", "batcheditsave", "cancel", "cancelrecord", "checked", "checkmark", "close", "createrecord", "down", "duplicaterecord", "edit", "editrecord", "error", "error-tmp", "filter", "firstpage", "fixedmenu", "info", "lastpage", "layoutcard", "layoutrow", "link", "menu", "nextpage", "outsidearrow", "prevpage", "reload", "remove", "removerecord", "search", "sort", "submitrecord", "success", "unchecked", "undoremoverecord", "up", "warning"
- Supported versions: 2.x

[Example code](https://app.zingsoft.com/demos/embed/3Z0S4888)

## CSS Variables
`<zg-icon>` can be styled with CSS variables, like so:

```css
:root {
  --zg-icon-color: red;
}
```

Below is a list of all the associated `--zg-icon` CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Default | Description | Demo |
| --- | --- | --- | --- |
| `--zg-icon-color` | var(--theme-color-primary) | Sets the fill color of icon | [Example code](https://app.zingsoft.com/demos/embed/QP3CK186) |
| `--zg-icon-height` | Browser's default value | Sets the height of icon. Also set width using --zg-icon-width to scale icon. | [Example code](https://app.zingsoft.com/demos/embed/35ELYFHO) |
| `--zg-icon-init-fill` | Browser's default value | Sets fill color of icon when element has [init] attribute. This indicates that column is sortable. The [init] is removed when column is sorted. | [Example code](https://app.zingsoft.com/demos/embed/K3C0AD5K) |
| `--zg-icon-width` | Browser's default value | Sets the width of icon. Also set height using --zg-icon-height to scale icon. | [Example code](https://app.zingsoft.com/demos/embed/QN5FK1OU) |

## CSS Selector

`<zg-icon>` can be styled by common CSS selectors, like so:

```css
zg-icon {
  stroke: red;
}
```

## Slots

`<zg-icon>` contains placeholders to allow adding markup inside the component.

```html
<zg-icon><img slot="icon" src="..."></zg-icon>
```

Below is a list of all the associated ZGIcon slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts).

| Name | Description |
| --- | --- |
| `icon` | Icon content. |