Iconsans

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/

Website

Installation

To use iconsans in your Vue project:

npm install @iconsans/vue

Usage

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";
</script>

<template>
    <PlayBold />
    <PlayLinear />
</template>

Props

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

Contributing

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:

https://www.figma.com/community/file/1228322259720738019

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