---
title: Icon
---

<script>
  import { Icon, Combobox, icons } from 'slender-ui'
  import { ComponentContainer } from '$lib'

  function getRandom(length) { return Math.floor(Math.random()*(length)); }

  function getRandomSample(array, size) {
    var length = array.length;

    for(var i = size; i--;) {
        var index = getRandom(length);
        var temp = array[index];
        array[index] = array[i];
        array[i] = temp;
    }

    return array.slice(0, size);
  }

  const icon_keys = getRandomSample(Object.keys(icons), 50)

  let icon = icon_keys[0]
</script>

Isn't it iconic?

All the icons are pre-generated SVGs and use an `<img>` tag to serve them, which can be slow in development but is performant in production and dramatically saves bundle size for your users by only loading the necessary icons.

<ComponentContainer>
  <div class="flex space-x-6 !shadow-none px-8 py-4" style="border-radius: var(--slender-border-radius);">
    <Icon name="slender.signal-messenger-outline"class="h-14 text-pink-500" />
  </div>

  <div slot="code">

```svelte
<script>
  import { Icon } from 'slender-ui'
</script>

<Icon name="feather.calendar" class="h-14 text-pink-500" />
```

  </div>
</ComponentContainer>
<!--
<div class="flex">
{#each icon_keys as key}
{/each}
</div>

<div class="not-prose">
  <Combobox
    variant="outlined"
    color="primary"
    value={icon}
    on:select={ evt => icon = evt.detail.value }
    on:click={ (evt) => icon = ''}
    class="px-2 py-1"
    options={icon_keys}
  />
</div> -->

Many thanks to [Feather](https://feathericons.com), [Heroicons](https://heroicons.com) and [Ionicons](https://ionic.io/ionicons).