SvelteKit SVG Icons: using Iconify and Icônes with Svelte
Tags: webdev, svelte, javascript
Published: 2022-04-04 09:21:26

---
title: "SvelteKit SVG Icons: using Iconify and Icônes with Svelte"
published: "true"
description: "SvelteKit SVG icons: how you can easily get SVG icons in your ❤️ Svelte app from just about any library by adding just one single dependency."
tags: "webdev, svelte, javascript"
canonical_url: "https://rodneylab.com/sveltekit-svg-icons/"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzgzzvoz34nj339kj1an.png"
---


##  🖼 What is Icônes and What is Iconify?

In this post on SvelteKit SVG icons, we see how easy it can be to get your pick of 100,00 SVG icons into your Svelte app.  We will do that by adding just one single dependency &mdash; the Iconify Svelte package.  Iconify is a unified icon framework.  In the past you needed one package to get font awesome icons into your library, then another to get the icons for the latest social sharing app.  Iconify lets you access both libraries (and many more), importing just the icons you need.

With that many libraries and icons to choose from, you will, without a doubt, need a catalogue and search tool to help you find the icons you need for your app.  That&rsquo;s where icônes comes in.  The app, created by Anthony Fu from the Vue core team, provides an interface for iconify, helping you find exactly what you need.  You just search for an icon and once you have something you like, it gives you a shortcode, which you can use to get that icon into your SvelteKit app.  We are going to see just how to do that in this post adding footer icons to a demo Svelte app.

## 🧱 What we're Building

![SvelteKit SVG Icons: What we're building: screenshot shows a website footer with the Twitter and Git Hub icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4f2vuxq2m1qgphdj5i2r.png)

We will see how you can accessibly add SVG icons to a SvelteKit app using iconify.  If you already have a SvelteKit app, you can create a new development branch and add the icons to it as you follow along. That said, you can also clone the complete code we build from the <a aria-label="Open up sveltekit-iconify demo code in the Rodney Lab Git Hub repo" href="https://github.com/rodneylab/sveltekit-iconify">Rodney Lab GitHub repo</a>, using that as a starting point for a new app.

Adding the SVG icons with iconify is fairly simple so let&rsquo;s get going straight away!  In a further, follow-up post we will use iconify to create share buttons which visitors can tap or click to share pages from your site on Twitter and other networks using the Web Share API.

## ⚙️ SvelteKit Iconify Setup

The only package you need to install is `@iconify/svelte`.  Let&rsquo;s add that to your project&nbsp;now:

```shell
pnpm add -D @iconify/svelte
```

## 🧩 Svelte Icon Component

Next, we&rsquo;ll create a Svelte icon component, but before that, <a aria-label="Open the icônes site" href="https://icones.js.org/">head over to icônes</a> and find the icon you want.  Select it. A modal titled  **How to use the icon?** will pop up.

![SvelteKit SVG Icons: screenshot from icones site shows the simple-icons:twitter short code for the selected icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la2sn9oxb131p6g555kl.png)

Here we selected the `twitter` icon from the `simple-icons` collection.  Make a note of your own selected combination.  You can just click the **Svelte** button to get an SVG path which you can then paste into your code.  However, we will use the iconify package to get a little more flexibility.  Assuming you are creating a Twitter icon, create `src/lib/components/TwitterIcon.svelte` in your project (change the name if you are adding another icon).  Add the following template code:

```svelte
<script>
  import Icon, { addCollection } from '@iconify/svelte/dist/OfflineIcon.svelte';

  export let label = '<UPDATE>';
  export let colour = 'inherit';
  export let ariaHidden = false;
  export let width = 48;

  /* some libraries add an id which can result in duplicate ids and that can impact accessibility so
  you can override with a random id if you face this issue */
  const id = Date.now().toString(16) + ((Math.random() * 0x1000000) | 0).toString(16);

  addCollection( /* REPLACE WITH ICON DATA */ );

  // https://api.iconify.design/<COLLECTION>.json?icons=<ICON>
</script>

<Icon icon="<COLLECTION>:<ICON>" {ariaHidden} aria-label={label} color={colour} {width} {id} />
```

In line `2` we import the `Icon` component as well as the `addCollection` function for offline support.  We will do a one-off download of the actual icon data in a moment.  As an alternative, if you are not bothered about offline support, you can skip the `addCollection` call and have iconify download the icon when it needs it.  In this case replace line `2`:

```svelte/TwitterIcon.svelte"
<script> /* ONLY IF YOU DO NOT WANT OFFLINE SUPPORT */
  import Icon from '@iconify/svelte';
```

Moving on, in line `11`, of the full code, we generate a random `id`.  This can be useful since some icon collections will add an `id` to the generated SVG.  If you use the same icon more than once on a page, you will probably get this flagged up by <a aria-label="Open post on Svelte Kit accessibility testing" href="https://rodneylab.com/sveltekit-accessibility-testing/">automated accessibility testing</a>.

### Downloading Icons for Offline Development

Possibly the easiest way to get the icon data for offline support is using the Terminal.  Just create a URL using the template in line `15` and use `curl` from the Terminal to download.  For the `simple-icons` `twitter` icon the full command will be (include the <code>"</code>s):

```shell
curl -L "https://api.iconify.design/simple-icons.json?icons=twitter"
```

This returns a JSON object which you can just paste into the template code in line `13`.  We also need to add the name of our chosen icon in line `18` as well as an accessible descriptive label in line `4`.  Here is the complete code for our Twitter icon:

```svelte
<script>
  import Icon, { addCollection } from '@iconify/svelte/dist/OfflineIcon.svelte';

  export let label = 'Twitter icon';
  export let colour = 'inherit';
  export let ariaHidden = false;
  export let width = 48;

  /* some libraries add an id which can result in duplicate ids and that can impact accessibility so
  you can override with a random id if you face this issue */
  const id = Date.now().toString(16) + ((Math.random() * 0x1000000) | 0).toString(16);

  addCollection({
    prefix: 'simple-icons',
    icons: {
      twitter: {
        body: '<path fill="currentColor" d="M23.953 4.57a10 10 0 0 1-2.825.775a4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.06a4.923 4.923 0 0 0 3.946 4.827a4.996 4.996 0 0 1-2.212.085a4.936 4.936 0 0 0 4.604 3.417a9.867 9.867 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.053 0 13.998-7.496 13.998-13.985c0-.21 0-.42-.015-.63A9.935 9.935 0 0 0 24 4.59z"/>',
      },
    },
    width: 24,
    height: 24,
  });

  // https://api.iconify.design/simple-icons.json?icons=twitter
</script>

<Icon icon="simple-icons:twitter" {ariaHidden} aria-label={label} color={colour} {width} {id} />

```

## 🏡 Using the SVG Icon Component

Finally we can add the SVG icon component as a footer icon:

```svelte
<script>
  import TwitterIcon from '$lib/components/TwitterIcon.svelte';
</script>

<footer class="footer-container">
  <nav class="links">
    <a aria-label="Open my Twitter profile" href="https://twitter.com"
      ><span class="icon"><TwitterIcon /></span></a
    >
  </nav>
</footer>

<style>
  .footer-container a {
    color: var(--colour-alt);
  }
  .footer-container a:focus,
  .footer-container a:hover {
    color: var(--colour-dark);
  }
  .icon {
    margin: var(--spacing-4);
  }
</style>
```

File is truncated here, <a aria-label="Open Svelte code on Rodney Lab Git Hub repo" href="https://github.com/rodneylab/sveltekit-iconify/blob/main/src/routes/index.svelte">see it in its full glory on the GitHub repo</a>.  That&rsquo;s it!


## 🙌🏽 SvelteKit SVG Icons: Wrapping Up

In this post we have seen a fairly simple way to add reusable SVG icon components to your Svelte app using iconify.  In particular we have seen:

- how to find icons from just about any icon library,
- how to download iconify icons for offline support in your Svelte app,
- some ways you can improve accessibility of SVG icons.

The full code for the app is available in the <a aria-label="Open the Svelte Kit Iconify code in the Rodney Lab Git Hub Repo" href="https://github.com/rodneylab/sveltekit-iconify">repo on Rodney Lab GitHub</a>.

Let me know how you use this in your projects.  Also look out for the follow-up post on using the Web Share API with iconify to add social share buttons to your Svelte app.

## 🙏🏽 SvelteKit SVG Icons: Feedback

Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please <a aria-label="Support Rodney Lab via Buy me a Coffee" href="https://rodneylab.com/giving/">consider supporting me through Buy me a Coffee</a>.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via <a aria-label="Reach out on Twitter" href="https://twitter.com/messages/compose?recipient_id=1323579817258831875">@askRodney</a> on Twitter and also <a aria-label="Contact Rodney Lab via Telegram" href="https://t.me/askRodney">askRodney on Telegram</a>. Also, see <a aria-label="Get in touch with Rodney Lab" href="https://rodneylab.com/contact">further ways to get in touch with Rodney Lab</a>. I post regularly on <a aria-label="See posts on Astro" href="https://rodneylab.com/tags/astro/">Astro</a> as well as <a aria-label="See posts on svelte kit" href="https://rodneylab.com/tags/sveltekit/">SvelteKit</a>. Also <a aria-label="Subscribe to the Rodney Lab newsletter" href="https://rodneylab.com/about/#newsletter">subscribe to the newsletter to keep up-to-date</a> with our latest projects.