Last Icon

Basic usage

Simply use <l-i></l-i>

Default icons

Set the name with name="your-icon" and, optionnaly, set a custom size with size="xx" (which is just a shortcut for setting style="--size:{xx}px")

Icons are using vertical-align:middle by default and a vertical-align:0.125em offset when contained in a p, button, a or span

Bootstrap Icons

Use set="bootstrap" or set="bs"

Tabler Icons

This is the default set

Use set="tabler" or set="tb"

You can also set various widths using stroke attribute (it will NOT use the font) ! It can also be set globally with defaultStroke.

Material Icons

Use set="material" or set="mi"

You can specify the following types: filled, outlined, round, sharp, two-tone

You can also use the font as an icon if needed!

Material Symbols

Use set="symbols" or set="ms". Works best with font icons if you intend to use options.

Weight (note how search and star behave differently, the star becomes much smaller with lower weights)

You can specify the following types: outlined, rounded, sharp

Click to toggle fill. Note that we don't see much difference between outlined and sharp ;-)

Animate them! (only works with font icons)

Animate on hover (only works with font icons)

Make sure size is perfect

Dark background

Super Tiny Icons

Use set="supertiny" or set="st"

Super useful if you need the social icons with proper colors 👌

Flags Icons

Use set="flags" or set="fl"

Emoji Icons

Use set="emojicc" or set="em"

Iconoir

Use set="iconoir" or set="in"

Stroke only works with svg

Feather

Use set="feather" or set="ft"

You can also set various widths using stroke attribute !

Lucide

Use set="lucide" or set="lu"

You can also set various widths using stroke attribute !

IconPark

Use set="iconpark" or set="ip"

You can also set various widths using stroke attribute !

You can set 4 themes (outline, filled, two-tone, multi-color): these need to be set in CSS.

Phosphor

Use set="phosphor" or set="ph"

You can set 6 types (bold, duotone, fill, light, regular, thin)

Invalid icons

Invalid icons are logged to the console and display a warning emoji

Animations and transformations

Use the same icon and rotate

Use the animation classes or they -hover variant

Or use svg animation

Advanced usage

Host your own icons

You can customize or add your own iconSets.

customElements.whenDefined("l-i").then(() => {
  // Access through registry
  customElements.get("l-i").configure({
    debug: true,
    // Specify our own loading path
    sets: {
      bootstrap: {
        svgPath: () => "./vendor/bootstrap",
      }
    },
  });
});