DEV Community

Cover image for The one with icon libraries in Nuxt.js and Chakra UI Vue
Sybren W
Sybren W

Posted on

The one with icon libraries in Nuxt.js and Chakra UI Vue

When I was working on my personal project with Nuxt.js and Chakra UI Vue I wanted to use FontAwesome Icons. I did struggle a bit to get the icons working in Chakra UI Vue inside my Nuxt.js project. Due to the fact that the Nuxt.config.js object looks a little different then the normal Vue.config.js object.

Getting started 🏃‍♂️

This small blog is all about Nuxt.js and Chakra UI Vue, meaning we have to start with creating a new Nuxt.js project.

Let's start quickly by using the create-nuxt-app.

npx create-nuxt-app <my-project>

Inside our terminal, we will have to answer a few questions. The only thing that's really important is that we select the Chakra UI option.

Options in Nuxt create-nuxt-app

Personally, I've chosen for Yarn as 'package manager', but feel free to pick what you prefer. After going inside the project folder we can launch our project.

cd <project-name>
yarn dev

✅ The first step is done! We have our project running! Chakra UI is kind enough to change the Index.vue page to let us know everything is running correctly.

🎁 Adding the Icons

In this post, I'll be using FontAwesome Icons, here again, pick your favorite icon pack if you want.

We can add it to our project using the following yarn command.

yarn add @fortawesome/fontawesome-free
yarn add @fortawesome/free-brands-svg-icons

The first package @fontawesome-free are the free icons from the Font Awesome library. The other package @free-brands-svg-icons are the free icons from brands like Twitter etc. from the Font Awesome library.

For this project, I'm using the brands-svg-icons to make a list as shown below.

Preview of the list of brand icons

The next big step is to import the icons we wish to use, for example, the Twitter icon.

Inside the nuxt.config.js file we have to add an import at the top for the icons.

import { faTwitter, faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons'

Then we have to add the icons to the Chakra plugin inside the config object.

Code of the config object

There it is! 🎉 Now we are ready to use the icons inside our templates!

We will use the CIcon component of Chakra UI to easily render the SVG Icons in our template.

Code of icons in template

In the name prop we have to pass the icon key. Which is is the icon name (faTwitter) without fa and lower case for Font Awesome icons.

I would suggest to check out the documentation here for more info on the props.

I really love how easy it is to use Icons in Chakra UI Vue and Nuxt.js. Thanks for reading and I do hope it will help you with your next project!

❤️ Contribute to this blog

Having any questions, caught a mistake, or have tips? Please reach out to me!

Top comments (6)

frikishaan profile image
Ishaan Sheikh

What if we want to add all icons in nuxt config?

carwack profile image
Sybren W • Edited

Sorry to take some time (not daily here on

But I would try to import * as icons from '@fortawesome/free-brands-svg-icons' for example and then in the nuxt config I would add icons to the icon pack option.
Since in Chakra UI Vue it takes all the icons set there.

I put an example in codesandbox.

EDIT: I've tested this out in codesandbox. make sure you've the latest nuxt module version for Chakra UI Vue.

I hope this helps you out.

frikishaan profile image
Ishaan Sheikh

Thanks 👍

9mza profile image

Help me so much, easy to use it, Thank you.

codebender828 profile image
Jonathan Bakebwa

Useful! Thank you, Sybren

carwack profile image
Sybren W

Thank you! Glad you like it!