Iconsans is a collection of over 660 free icons designed for use in your next project. This package offers separate versions for Vue and React, making it easy for developers and designers to access a wide range of icons that can be used in a variety of applications.

Demo: https://mortezasabihi.github.io/iconsans/



To use iconsans in your Vue project:

npm install @iconsans/vue


After installing iconsans, you can use it in your project by importing the icons you need. For example, if you want to use the "play" icon in your Vue project, you can import it like this:

<script setup lang="ts">
    import { Play as PlayBold } from "@iconsans/vue/bold";
    import { Play as PlayLinear } from "@iconsans/vue/linear";

    <PlayBold />
    <PlayLinear />


Name Type
Width? Number, String
Height? Number, String
Color? String


You can contribute to the project! Visit the guide on contributing to get started.

Figma Design

The icons in iconsans were designed using Figma, and you can find the design file in the following link:


You can use this design file to view the icons, modify them, or create your own custom icons based on the iconsans design.