Back to site

Icon

SVG icon component.

---
import Icon from "@core-elements/icon/Icon.astro";
---

<Icon name="cube" size="lg" />
---
blocks:
  _component: building-blocks/core-elements/icon
  name: cube
  size: lg
---

Overview

Used to add icons to other components including buttons and headings. Loads icons from /src/icons/. Icons are optimized with SVGO and deduplicated when reused across a page for improved performance. Supports configurable sizes.

Properties

name enum | default: bolt

The name of the icon to display from the icon library.

size enum | default: lg

The size of the icon.

Accepted values:
  • none
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

color enum | default: default

The color of the icon.

Accepted values:
  • default
  • blue
  • green
  • yellow
  • orange
  • red
  • purple
  • pink
  • cyan

background boolean | default: true

Show a background behind the icon.

alignX enum | default: start

Horizontal alignment of the icon.

Accepted values:
  • start
  • center
  • end

Examples

Sizes

---
import Icon from "@core-elements/icon/Icon.astro";
---

<Icon name="envelope" size="none" />

<Icon name="envelope" size="sm" />

<Icon name="envelope" size="md" />

<Icon name="envelope" size="lg" />

<Icon name="envelope" size="xl" />

<Icon name="envelope" size="2xl" />

<Icon name="envelope" size="3xl" />
---
blocks:
  - _component: building-blocks/core-elements/icon
    size: none
    name: envelope
  - _component: building-blocks/core-elements/icon
    size: sm
    name: envelope
  - _component: building-blocks/core-elements/icon
    size: md
    name: envelope
  - _component: building-blocks/core-elements/icon
    size: lg
    name: envelope
  - _component: building-blocks/core-elements/icon
    size: xl
    name: envelope
  - _component: building-blocks/core-elements/icon
    size: 2xl
    name: envelope
  - _component: building-blocks/core-elements/icon
    size: 3xl
    name: envelope
---

Types

---
import Icon from "@core-elements/icon/Icon.astro";
---

<Icon name="star" size="lg" title="Outline" />

<Icon name="social/github" size="lg" title="Fill" />
---
blocks:
  - _component: building-blocks/core-elements/icon
    name: star
    size: lg
    title: Outline
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    title: Fill
---

Colors

---
import Icon from "@core-elements/icon/Icon.astro";
---

<Icon color="default" name="cube" size="lg" />

<Icon color="blue" name="cube" size="lg" />

<Icon color="cyan" name="cube" size="lg" />

<Icon color="green" name="cube" size="lg" />

<Icon color="yellow" name="cube" size="lg" />

<Icon color="orange" name="cube" size="lg" />

<Icon color="red" name="cube" size="lg" />

<Icon color="purple" name="cube" size="lg" />

<Icon color="pink" name="cube" size="lg" />
---
blocks:
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: default
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: blue
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: cyan
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: green
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: yellow
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: orange
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: red
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: purple
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: pink
---
---
import Icon from "@core-elements/icon/Icon.astro";
---

<Icon color="default" name="social/github" size="lg" />

<Icon color="blue" name="social/github" size="lg" />

<Icon color="cyan" name="social/github" size="lg" />

<Icon color="green" name="social/github" size="lg" />

<Icon color="yellow" name="social/github" size="lg" />

<Icon color="orange" name="social/github" size="lg" />

<Icon color="red" name="social/github" size="lg" />

<Icon color="purple" name="social/github" size="lg" />

<Icon color="pink" name="social/github" size="lg" />
---
blocks:
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: default
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: blue
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: cyan
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: green
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: yellow
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: orange
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: red
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: purple
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: pink
---

Backgrounds

---
import Icon from "@core-elements/icon/Icon.astro";
---

<Icon background color="default" name="cube" size="lg" />

<Icon background color="blue" name="cube" size="lg" />

<Icon background color="cyan" name="cube" size="lg" />

<Icon background color="green" name="cube" size="lg" />

<Icon background color="yellow" name="cube" size="lg" />

<Icon background color="orange" name="cube" size="lg" />

<Icon background color="red" name="cube" size="lg" />

<Icon background color="purple" name="cube" size="lg" />

<Icon background color="pink" name="cube" size="lg" />
---
blocks:
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: default
    background: true
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: blue
    background: true
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: cyan
    background: true
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: green
    background: true
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: yellow
    background: true
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: orange
    background: true
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: red
    background: true
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: purple
    background: true
  - _component: building-blocks/core-elements/icon
    name: cube
    size: lg
    color: pink
    background: true
---
---
import Icon from "@core-elements/icon/Icon.astro";
---

<Icon background color="default" name="social/github" size="lg" />

<Icon background color="blue" name="social/github" size="lg" />

<Icon background color="cyan" name="social/github" size="lg" />

<Icon background color="green" name="social/github" size="lg" />

<Icon background color="yellow" name="social/github" size="lg" />

<Icon background color="orange" name="social/github" size="lg" />

<Icon background color="red" name="social/github" size="lg" />

<Icon background color="purple" name="social/github" size="lg" />

<Icon background color="pink" name="social/github" size="lg" />
---
blocks:
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: default
    background: true
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: blue
    background: true
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: cyan
    background: true
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: green
    background: true
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: yellow
    background: true
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: orange
    background: true
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: red
    background: true
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: purple
    background: true
  - _component: building-blocks/core-elements/icon
    name: social/github
    size: lg
    color: pink
    background: true
---

Alignment

---
import Icon from "@core-elements/icon/Icon.astro";
---

<Icon alignX="start" background color="blue" name="arrow-right" size="lg" />
---
blocks:
  - _component: building-blocks/core-elements/icon
    name: arrow-right
    size: lg
    alignX: start
    color: blue
    background: true
---
---
import Icon from "@core-elements/icon/Icon.astro";
---

<Icon alignX="center" background color="blue" name="arrow-right" size="lg" />
---
blocks:
  - _component: building-blocks/core-elements/icon
    name: arrow-right
    size: lg
    alignX: center
    color: blue
    background: true
---
---
import Icon from "@core-elements/icon/Icon.astro";
---

<Icon alignX="end" background color="blue" name="arrow-right" size="lg" />
---
blocks:
  - _component: building-blocks/core-elements/icon
    name: arrow-right
    size: lg
    alignX: end
    color: blue
    background: true
---