Convert Figma logo to code with AI

Iconscout logounicons

Unicons by IconScout offers 7,000+ free 3D and animated icons plus icon fonts in line, monochrome, solid and thin line styles. Use them in your web, iOS or Android design projects.

1,406
97
1,406
43
View on GitHubView on NPM

Top Related Projects

tabler's avatar

tabler-icons

17,904

A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.

feathericons's avatar

feather

24,931

Simply beautiful open-source icons

ionic-team's avatar

ionicons

17,564

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

primer's avatar

octicons

8,302

A scalable set of icons handcrafted with <3 by GitHub

FortAwesome's avatar

Font-Awesome

73,502

The iconic SVG, font, and CSS toolkit

google's avatar

material-design-icons

50,411

Material Design icons by Google (Material Symbols)

Quick Overview

Unicons is a comprehensive library of pixel-perfect vector icons and Iconfont. It offers over 1,100 icons in Line and Solid styles, providing a versatile set of icons for various design needs. The project is open-source and maintained by Iconscout.

Pros

  • Large collection of over 1,100 icons in both Line and Solid styles
  • Pixel-perfect design ensures high-quality appearance across different sizes
  • Available in multiple formats: SVG, PNG, React, Vue, and Iconfont
  • Regular updates and additions to the icon set

Cons

  • Some advanced customization options may be limited compared to other icon libraries
  • Dependency on external CDN for web font usage might not be suitable for all projects
  • Learning curve for integrating with different frameworks and build systems

Code Examples

  1. Using Unicons as a web font:
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<i class="uil uil-user"></i>
  1. Using Unicons with React:
import { UilUser } from '@iconscout/react-unicons'

function App() {
  return <UilUser size="40" color="#61DAFB" />
}
  1. Using Unicons with Vue.js:
<template>
  <UilUser size="40" color="#41B883" />
</template>

<script>
import { UilUser } from '@iconscout/vue-unicons'

export default {
  components: {
    UilUser
  }
}
</script>

Getting Started

To use Unicons in your project, follow these steps:

  1. Install the package using npm or yarn:

    npm install @iconscout/react-unicons

    or

    yarn add @iconscout/react-unicons

  2. Import and use the icons in your React component:

    import { UilReact, UilHtml5 } from '@iconscout/react-unicons'

function MyComponent() {
  return (
    <div>
      <UilReact size="32" color="#61DAFB" />
      <UilHtml5 size="32" color="#E34F26" />
    </div>
  )
}

  3. For web font usage, include the CSS file in your HTML:

    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

    Then use the icons with the appropriate classes:

    <i class="uil uil-react"></i>
<i class="uil uil-html5"></i>

Competitor Comparisons

tabler logo

tabler-icons

17,904

A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Pros of tabler-icons

  • Larger icon set with over 3,400 icons compared to Unicons' 1,200+
  • Offers both SVG and web font versions of icons
  • Includes a convenient icon search and preview tool on their website

Cons of tabler-icons

  • Less customization options for icon styles (e.g., no filled variants)
  • Fewer icon categories and less organized structure compared to Unicons
  • Limited documentation on usage and integration

Code Comparison

tabler-icons usage:

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <circle cx="12" cy="7" r="4" />
  <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>

Unicons usage:

<i class="uil uil-user"></i>

Both libraries offer easy-to-use icon implementations, but Unicons provides a simpler HTML structure for basic usage. tabler-icons offers more control over icon appearance through inline SVG, while Unicons relies on CSS classes for styling.

feathericons logo

feather

24,931

Simply beautiful open-source icons

Pros of Feather

  • Simpler and more minimalist design aesthetic
  • Smaller file sizes, leading to faster load times
  • Consistent 24x24 pixel grid for all icons

Cons of Feather

  • Fewer icons available (currently around 280)
  • Less frequent updates and new icon additions
  • Limited style variations (only line icons)

Code Comparison

Unicons usage:

<span class="uil uil-user"></span>
<i class="uil uil-envelope"></i>

Feather usage:

<i data-feather="user"></i>
<i data-feather="mail"></i>

Both libraries offer easy integration, but Feather requires an additional JavaScript file to replace the <i> elements with SVG icons:

feather.replace()

Unicons provides more flexibility with its CSS-based approach, allowing for easier customization without additional JavaScript. However, Feather's JavaScript method enables dynamic icon loading and manipulation.

While Unicons offers a vast collection of icons in multiple styles (line, solid, and monochrome), Feather focuses on a curated set of simple, consistent icons. Unicons is better suited for projects requiring a wide variety of icons and styles, whereas Feather is ideal for minimalist designs with a cohesive look.

ionic-team logo

ionicons

17,564

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

Pros of Ionicons

  • Larger icon set with over 1,300 icons compared to Unicons' 1,000+
  • Tighter integration with Ionic Framework for seamless use in Ionic projects
  • Supports custom SVG builds for optimized performance

Cons of Ionicons

  • Less frequent updates compared to Unicons' regular additions
  • Primarily focused on web and mobile app development, potentially limiting versatility
  • Steeper learning curve for non-Ionic developers

Code Comparison

Unicons usage:

<script src="https://unicons.iconscout.com/release/v3.0.6/script/monochrome/bundle.js"></script>
<i class="uim uim-rocket"></i>

Ionicons usage:

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<ion-icon name="rocket"></ion-icon>

Both libraries offer easy integration, but Ionicons requires two script tags for broader browser support. Unicons uses a class-based approach, while Ionicons uses a custom element with a name attribute.

primer logo

octicons

8,302

A scalable set of icons handcrafted with <3 by GitHub

Pros of Octicons

  • Designed specifically for GitHub's UI, ensuring consistency with the platform
  • Includes both SVG and PNG formats for flexibility
  • Offers a wider range of icon sizes and styles

Cons of Octicons

  • Smaller icon set compared to Unicons
  • Less frequent updates and new icon additions
  • More GitHub-centric, which may limit versatility in non-GitHub projects

Code Comparison

Unicons usage:

<i class="uil uil-user"></i>

Octicons usage:

<svg class="octicon octicon-person" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
  <path fill-rule="evenodd" d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"></path>
</svg>

Both Unicons and Octicons offer high-quality icon sets for developers. Unicons provides a larger collection with more frequent updates, making it suitable for a wide range of projects. Octicons, while more limited in scope, excels in GitHub-related projects and offers multiple format options. The choice between the two depends on the specific project requirements and design preferences.

FortAwesome logo

Font-Awesome

73,502

The iconic SVG, font, and CSS toolkit

Pros of Font-Awesome

  • Larger icon set with over 7,000 icons
  • Well-established and widely recognized in the web development community
  • Offers both free and paid (Pro) versions with additional features

Cons of Font-Awesome

  • Larger file size, which may impact page load times
  • Some advanced features and icons are only available in the paid version
  • More complex setup process compared to Unicons

Code Comparison

Unicons:

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<i class="uil uil-user"></i>

Font-Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<i class="fas fa-user"></i>

Both libraries offer simple HTML implementation, but Unicons has a slightly more straightforward class naming convention. Font-Awesome uses different prefixes (e.g., "fas", "far") for various icon styles, while Unicons uses a consistent "uil" prefix for its line icons.

Overall, Font-Awesome offers a more extensive icon set and broader community support, but Unicons provides a lighter-weight alternative with a simpler implementation. The choice between the two depends on specific project requirements, such as the need for a vast icon library versus a more streamlined solution.

google logo

material-design-icons

50,411

Material Design icons by Google (Material Symbols)

Pros of Material Design Icons

  • Extensive collection with over 2,000 icons in various styles
  • Official Google design system, ensuring consistency with Android and other Google products
  • Regular updates and maintenance by a large team

Cons of Material Design Icons

  • Limited customization options compared to Unicons
  • Larger file sizes, which may impact performance in some applications
  • Primarily designed for Material Design, potentially less versatile for other design systems

Code Comparison

Material Design Icons:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">favorite</i>

Unicons:

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
<i class="uil uil-heart"></i>

Key Differences

  • Material Design Icons focuses on Google's design language, while Unicons offers a more diverse set of styles
  • Unicons provides both line and solid versions of icons, offering more flexibility
  • Material Design Icons has better integration with Google products and Android development
  • Unicons offers a wider range of customization options, including color and size adjustments

Use Cases

Material Design Icons is ideal for:

  • Android app development
  • Projects following Google's Material Design guidelines
  • Applications integrated with Google services

Unicons is better suited for:

  • Projects requiring a variety of icon styles
  • Websites and applications with custom design systems
  • Developers who need more flexibility in icon customization

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Unicons

1000+ Pixel-perfect vector icons and Iconfont for your next project. These icons are designed by IconScout.

Getting Started

Using as a font

It's easy to use Unicons on your website by just inserting following css. You can also download this repo and use the css from css folder.

<link
  rel="stylesheet"
  href="https://unicons.iconscout.com/release/v4.0.0/css/unicons.css"
/>

And use the icons in your body as below.

<i class="uil uil-comments"></i>

Using as npm package

You can easily install Unicons using npm.

npm install --save @iconscout/unicons

Using as an SVG

If you're a designer then it's always great to have SVG files. You can download SVGs from Official Unicons Website or download Icondrop to access these icons right into Sketch, Adobe Xd, Adobe Illustrator, and many more.

Using in Flutter Framework

There's a Flutter package created by Pedro Lemos, avaliable in pub.dev, which can be easily used in your project.

Just add the dependency in your pubspec.yaml file as following:

dependencies:
  unicons: ^1.0.0+2

Then, run the command above:

flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Now, in your Dart code, import the package:

import 'package:unicons/unicons.dart';

Use with JS Frameworks

We've created components for popular libraries like React, VueJS, React Native. You can head over to official GitHub Repo to know more.

Line Style

Solid Style

Monochrome Style

More ways (Community supported)

Roadmap

  • Make React Components
  • Adding Brand Icons
  • Designing Solid Style
  • Designing Thin-line Style
  • Support for CSS Animations
  • Make SVG Sprite in which user can control different attributes such as stroke, fill, width, height and more.

Contributing

We will be happy to have community support for Unicons. Feel free to fork and create pull requests. We have given a small roadmap above so that you can help us build these features.

Icon Requests

We've created a thread at IconScout Community where you can request for new icons. And we'll be happy to design them in upcoming weeks.

License

Unicons are Open Source icons and licensed under IconScout Simple License. You're free to use these icons in your personal and commercial project. We would love to see the attribution in your app's about screen, but it's not mandatory.

Unicons by <a href="https://iconscout.com/">IconScout</a>

NPM DownloadsLast 30 Days