Icon Component

FigmaHeroicons

The glu-icon component is a versatile element that renders SVG icons from Heroicons v2.0. It supports multiple visual variants, customizable sizes, and color adjustments. This makes it easy to integrate scalable icons into your projects with a consistent style.

Basic Usage

Example 1: Simple Icon

Display a basic icon by specifying the name property.

HTML

Result

Loading...

Live Editor

<glu-icon name="arrow-up"></glu-icon>

React

Result

Loading...

Live Editor

<GluIcon name="arrow-up" />

Vue

<glu-icon name="arrow-up"></glu-icon>

<script setup>
import { GluIcon } from '@gelato-ui/vue';
</script>

Angular

<glu-icon name="arrow-up"></glu-icon>

import { Component } from '@angular/core';
import { GluIcon } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluIcon],
  template: `<glu-icon name="arrow-up"></glu-icon>`
})
export class MyComponent {}

---

Icon Variants

Customize the icon appearance using the variant property. Choose between outline (default) and solid to suit your design.

HTML

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem' }}>
  <glu-icon name="arrow-up" variant="outline"></glu-icon>
  <glu-icon name="arrow-up" variant="solid"></glu-icon>
</div>

React

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem' }}>
  <GluIcon name="arrow-up" variant="outline" />
  <GluIcon name="arrow-up" variant="solid" />
</div>

Vue

<div style="display: flex; gap: 1rem;">
  <glu-icon name="arrow-up" variant="outline"></glu-icon>
  <glu-icon name="arrow-up" variant="solid"></glu-icon>
</div>

<script setup>
import { GluIcon } from '@gelato-ui/vue';
</script>

Angular

<div style="display: flex; gap: 1rem;">
  <glu-icon name="arrow-up" variant="outline"></glu-icon>
  <glu-icon name="arrow-up" variant="solid"></glu-icon>
</div>

import { Component } from '@angular/core';
import { GluIcon } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluIcon],
  template: `
    <div style="display: flex; gap: 1rem;">
      <glu-icon name="arrow-up" variant="outline"></glu-icon>
      <glu-icon name="arrow-up" variant="solid"></glu-icon>
    </div>
  `
})
export class MyComponent {}

---

Icon Sizes

Adjust the dimensions of the icon using the size property, which overrides both the width and height. Alternatively, you can set custom values for width and height.

HTML

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem' }}>
  <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
    <glu-icon name="arrow-up" size="16"></glu-icon>
    <glu-icon name="arrow-up" size="24"></glu-icon>
    <glu-icon name="arrow-up" size="32"></glu-icon>
  </div>
  <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
    <glu-icon name="arrow-up" width="16" height="16"></glu-icon>
    <glu-icon name="arrow-up" width="24" height="24"></glu-icon>
    <glu-icon name="arrow-up" width="32" height="32"></glu-icon>
  </div>
</div>

React

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <GluIcon name="arrow-up" size={16} />
  <GluIcon name="arrow-up" size={24} />
  <GluIcon name="arrow-up" size={32} />
</div>

Vue

<div style="display: flex; gap: 1rem; align-items: center;">
  <glu-icon name="arrow-up" size="16"></glu-icon>
  <glu-icon name="arrow-up" size="24"></glu-icon>
  <glu-icon name="arrow-up" size="32"></glu-icon>
</div>

<script setup>
import { GluIcon } from '@gelato-ui/vue';
</script>

Angular

<div style="display: flex; gap: 1rem; align-items: center;">
  <glu-icon name="arrow-up" size="16"></glu-icon>
  <glu-icon name="arrow-up" size="24"></glu-icon>
  <glu-icon name="arrow-up" size="32"></glu-icon>
</div>

import { Component } from '@angular/core';
import { GluIcon } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluIcon],
  template: `
    <div style="display: flex; gap: 1rem; align-items: center;">
      <glu-icon name="arrow-up" size="16"></glu-icon>
      <glu-icon name="arrow-up" size="24"></glu-icon>
      <glu-icon name="arrow-up" size="32"></glu-icon>
    </div>
  `
})
export class MyComponent {}

---

Customizing Icon Color

Apply a custom color using the color property. Ensure that your SVG uses currentColor so that the color change is effective.

HTML

Result

Loading...

Live Editor

<glu-icon name="arrow-up" color="#ff0000"></glu-icon>

React

Result

Loading...

Live Editor

<GluIcon name="arrow-up" color="#ff0000" />

Vue

<glu-icon name="arrow-up" color="#ff0000"></glu-icon>

<script setup>
import { GluIcon } from '@gelato-ui/vue';
</script>

Angular

<glu-icon name="arrow-up" color="#ff0000"></glu-icon>

import { Component } from '@angular/core';
import { GluIcon } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluIcon],
  template: `<glu-icon name="arrow-up" color="#ff0000"></glu-icon>`
})
export class MyComponent {}

---

Properties

Property	Attribute	Description	Type	Default
color	color	Custom color for the SVG icon. Para que este cambio tenga efecto, asegúrate de que el SVG use currentColor en sus atributos.	string	undefined
height	height	Custom height of the icon in pixels	number | string	24
name (required)	name	The name of the icon to display	string	undefined
size	size	Uniform size of the icon in pixels (takes precedence over width and height)	number | string	undefined
variant	variant	The visual variant style of the icon	"outline" | "solid"	'outline'
width	width	Custom width of the icon in pixels	number | string	24

Dependencies

Used by

• glu-breadcrumb
• glu-checkbox
• glu-helper-text
• glu-input
• glu-label
• glu-menu-dropdown

Graph

---

Built with StencilJS