And why you should use icons in your next application
Photo by Ryoji Iwata on Unsplash
Take a look at the websites and applications you use most frequently. You might notice they have something in common. That?s right, they all make use of icons. Like the proverb, ?a picture is worth a thousand words?. As web developers, we can use icons to spice up our websites and grab our users? attention.
Take a look at Instagram. They use icons for their navigation. A heart for your likes, a compass to discover, and a house to return home. These icons are used instead of text and require global recognition to be useful.
A look at the icons used in the Instagram application
Icons can be especially useful for navigation on websites that are translated into many different languages. For example, if we had a design that relied on our ?home? navigation text being relatively short (four characters), how will it look in French, where we use the word ?acceuil? (seven characters) instead?
However, we should use icons to replace text when they have one clear, recognizable meaning. Like bathroom. When I?m visiting a new country, I might not know the word for the bathroom, but I can sure recognize the symbol.
Photo by Juan Marin on Unsplash
So now that we have established the widespread use, and usefulness of icons in web design, let?s take look at how we can easily incorporate into our next React application.
Let?s start with our acceptance criteria. We want a library that
- Can be imported one by one (without unused icons)
- The icons should be SVG-based, not font-based.
- Works out of the box without changes to our build setup.
Why SVG?
In the past, uses font based icons was all the rage. You might remember using font awesome in previous projects. However, using font-based icons has the following drawbacks:
- Font sets contain icons that you (probably) won?t use, so they bloat your bundle size.
- They require performing another HTTP request to fetch the font set.
- They lead to invisible text flashing (when the font loads), leading to a poor user experience.
- They have bad accessibility, as we can?t provide meaning to users with screen readers
- They are hard to position, and you need to play around with line-height to get them vertically centred.
Whereas, using SVG based icons gives us the following benefits:
- Accessibility. They are treated like images instead of text, so you can use attributes like title and description for users with screen readers.
- Easily customizable with CSS, and can even be animated.
- Inline SVGs are included in the HTML document, so they require no further HTTP requests and don?t suffer from the flash of invisible text like font based icons.
So without further ado, let?s take a look at the best SVG icon sets to use for a React application 2020.
1. React Icons
React Icons
react-icons/react-icons
Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to?
github.com
React Icons offers popular sets of icons, including FontAwesome, Ant Design, Material Design and more. They can be imported one by one using ES6 syntax.
import { FaHeart } from ‘react-icons/fa’;const Home = () => ( <a href=”/”><FaHeart /></a>);
You can even use the React Context API to configure global configurations for your react-icons.
<IconContext.Provider value={{ className: “my-icon-classname” }}> <App /></IconContext.Provider>;
2. Styled Icons ?
Styled Icons
jacobwgillespie/styled-icons
styled-icons provides over 13,500 icons from the following icon packs as Styled Components, with full support for?
github.com
Styled-Icons offers over 13,500 icons from popular icon packs as styled-components. It also offers TypeScript support and ES6 style imports. If your project is already using styled-components, then styled-icons is a great choice.
import React from ‘react’import { Lock } from ‘@styled-icons/material’const Lock = () => <Lock size=”48″ title=”Unlock account” />
3. React Feather
Feather Icons
feathericons/react-feather
What is react-feather? react-feather is a collection of simply beautiful open source icons for React.js. Each icon is?
github.com
As you might have guessed from the name, react-feather offers the feather icons as a set of React components. Feather bill itself as ?simply beautiful open source icons?, and they aren?t kidding. What they lack in numbers, they more than makeup for in quality.
import React from ‘react’;import { Camera } from ‘react-feather’;const App = () => { return <Camera />};export default App;
Feather icons are a great choice to make your app stand out, as many applications use popular icon sets like Material Design and Font Awesome.
These are my favourite icon libraries to use when I start a new React application. What about you? Let us know what your favourite library is, and how you incorporate icons into your web applications.
