Icon

Basic Usage

Create an icon using the k-icon component. You can specify the icon by setting the name or src attribute.

<k-icon name="folder"></k-icon>
<k-icon src="/path/to/icon.svg"></k-icon>

<k-icon name="arrow"></k-icon>
<k-icon name="arrow-line"></k-icon>
<k-icon name="arrow-circle"></k-icon>
<k-icon name="chevron"></k-icon>
<k-icon name="chevron-double"></k-icon>

Rotation and Direction

Use the rotation attribute to rotate an icon by a specific degree value, or use the direction attribute for semantic rotation (down=90°, left=180°, up=270°). Only set one attribute at a time.

<k-icon name="arrow"></k-icon>
<k-icon name="arrow" direction="down"></k-icon>
<k-icon name="arrow" direction="left"></k-icon>
<k-icon name="arrow" direction="up"></k-icon>
<k-icon name="chevron" rotation="45"></k-icon>

Animation

Use the animation attribute to add built-in animations to icons. Available options are spin, blink, and pulse.

<k-icon name="arrow-circle" animation="spin"></k-icon>
<k-icon name="arrow" animation="blink"></k-icon>
<k-icon name="chevron" animation="pulse"></k-icon>

Explicitly Set the Source

You can use any svg file that is publically available (on your site or any other public domain) buy using the src attribute instead of name. The code will attempt to ensure compatability.

<k-icon name="wysiwyg"></k-icon>

Fallback Icon

Put an SVG inside of the k-icon to be the fallback if one is not found that matches the provided name or source. Otherwise a will be the fallback icon.

<k-icon name="invalid"></k-icon>
<k-icon name="invalid">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-280h200v-80H240v80Zm400 0h80v-80h-80v80ZM240-440h200v-80H240v80Zm400 0h80v-240h-80v240ZM240-600h200v-80H240v80Zm-80 480q-33 0-56.5-23.5T80-200v-560q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v560q0 33-23.5 56.5T800-120H160Zm0-80h640v-560H160v560Zm0 0v-560 560Z"/></svg>
</k-icon>

You can also set a global fallback icon that will be used for all icons when no icon is found and no slotted content is provided:

<script>
  window.kempo = {
    fallbackIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>`
  };
</script>

Changing the Icon Directory Location

To change the location of the directory holding the icons, set the global kempo.pathsToIcons config before any components are loaded (for example in the head of the document). An array of paths is accepted — directories are checked in order and the first match is used, allowing you to override built-in icons or add your own alongside them.

<script>
  window.kempo = {
    pathsToIcons: ['./my-icons', './node_modules/kempo-ui/icons']
  };
</script>

Adding Icons with the CLI

kempo-ui ships CLI tools for searching and downloading icons from the Google Material Symbols library. They are available via npx after installing kempo-ui.

Use the interactive picker to search and download in one step — type to filter, arrow keys to navigate, Enter to select:

npx kempo-icon

Or use the individual commands for scripting:

# Search by name or tag
npx kempo-listicons chevron

# Download by name (saves to icons/ by default)
npx kempo-geticon chevron_right

# Download with a custom name
npx kempo-geticon content_copy copy

# Save to a custom directory
npx kempo-geticon format_bold --dir src/assets/icons

# Auto-accept directional icon prompt
npx kempo-geticon chevron_left -y

Directional icons (those with _left, _up, _down etc. variants) are handled automatically — the CLI downloads the right-facing version and names it without the direction suffix. Use the direction attribute on <k-icon> to rotate it.

Adding Icons Manually

Add your SVGs to the directory, remove the height and width attributes from the svg tag (if you do not, the Icon component will attempt to do it for you). The height and width will be managed by CSS to match the font-size. Give all objects (path, rect, circle) a fill of currentColor, this will allow the icon to adapt to the font color where it is rendered.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24" height="24"><path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>

JavaScript Reference

Constructor

Extends Component

new Icon()
new Icon(string name)

Parameters

name: string

The name of the icon.

Requirements

• ShadowComponent

Properties

name: string

The name of the icon. Syncs with the name attribute.

src: string

The source URL of the icon. Syncs with the src attribute.

rotation: string

The rotation angle in degrees (e.g., "45" or "180"). Syncs with the rotation attribute. Do not use with direction.

direction: string

Semantic direction for icon rotation. Options: "down" (90°), "left" (180°), "up" (270°). Syncs with the direction attribute. Do not use with rotation.

animation: string

Built-in animation to apply. Options: "spin" (continuous rotation), "blink" (fade in/out), "pulse" (scale up/down). Syncs with the animation attribute.

pathsToIcons: Array

An array of paths to directories containing icons. This is configured via the global window.kempo.pathsToIcons config object. Directories are checked in order — the first match wins.