akveo/eva-icons

A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

eva-icons's Issues

Sketch file icon ordering

Hi, I often use the sketch file with the icons to use them in my designs.
The only problem I am facing is that it's very hard to see which icons have both a filled and outlined design.

If I see an icon filled, I have a hard time finding them outlined, and vice-versa.

I think it could be greatly improved if the icons that have 2 versions are in the same order, and only those who have just 1 version come last.

How I can use in react?

I see the icons can be installed as an npm package but it doesn't have any example on how to use it in a frameworks. Ex. React, Vue, Angular.

404 Not found

https://akveo.github.io/eva-icons/
This page was not founded anymore

How do I change color of icons?

Sorry I'm not that familiar to SVG icons. I looked into docs and noticed they are styled with CSS like stroke: #aaf;. Each SVG file contains <defs> which has a <style> element like:

<style>.cls-1{fill:#231f20;}.cls-2{fill:none;opacity:0;}</style>
<style>.cls-1{fill:#fff;opacity:0;}.cls-2{fill:#231f20;}</style>
<style>.cls-1{fill:none;opacity:0;}.cls-2{fill:#231f20;}</style>
<style>.cls-1{opacity:0;}.cls-2{fill:#fff;}.cls-3{fill:#231f20;}</style>

I could think of removing those styles and add my own in parent elements. But what's the suggested solution for styling them?

BTW, I'm doing experiments currently to see if I can use them in my projects(or I may just fallback to fonts) https://github.com/Respo/respo-eva/blob/master/icons/eva/icons.cljs#L9-L14

"more-horizontal-outline" icon is misspelled.

'h o r i z o n t a l' is the correct spelling,

but now it is 'h o r i z o t n a l';

Thank you

SyntaxError: Unexpected token 'export'

While trying to use an eva icon in React (next js)

, this error occured.

Steps to reproduce

Followed the instructions at iconfiy.design, React tab

npm install --save-dev @iconify/react @iconify-icons/eva
import { Icon, InlineIcon } from '@iconify/react';
import arrowIosBackOutline from '@iconify-icons/eva/arrow-ios-back-outline';

then to use

<Icon icon={arrowIosBackOutline} />

[Request] Discord icon

Hi,

I could not find the discord icon to create a login button. I thought it might be forgotten as every other social platform icon is there.

Can you please add it? Cheers!

instagram and vkontakte icons

Thank you for the great icons! There are not enough icons for Instagram and Vkontakte :)

PNGs are zero bytes

Hey, nothing much to say besides that the "Complete Eva Icons Package" containing both PNGs and SVGs contain broken PNGs. Every single PNG icon is 0 bytes. Downloading the specific PNGs yields the same result.

no such file or directory

Hi,

I am getting below fatal error. Can you please suggest me. Seems like index.js is available and one more process searching on index.ts

WARNING in ./node_modules/@ui-kitten/eva-icons/node_modules/react-native-eva-icons/icons/index.js
Module Warning (from ./node_modules/@expo/webpack-config/node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\Lenovo\drive\appd\node_modules@ui-kitten\eva-icons\lib\icons\index.ts' file: Error:
ENOENT: no such file or directory, open 'C:\Users\Lenovo\drive\appd\node_modules@ui-kitten\eva-icons\lib\icons\index.ts'

Raja K

[Request] Sort icon

Hi, this is the best icons library and I love it!

In my current project I want to use an sort icon, something like this: https://fontawesome.com/icons/sort?style=solid

Thank you so much.

Grid for icons

Hi,

Can you share the template file (artboard) with the grid? Just need to design a few custom icons.

bundle size

Hi, and thanks for an awesome set of icons. I am using them in an angular 9 project, but they seem to add quite a lot to the bundle size. I have this npm task: ng build --prod --stats-json && webpack-bundle-analyzer ./dist/noc/stats.json and checked the bundle of different packages. I wasn't expecting eva-icons to be that big. Is there a way to trim down on that?

Missed icons from eva design

I've noticed that we don't have at least face-sad icon in the icons even if it's placed in figma library. Please check and synchronize figma library with actual set of icons.

list of available icons:
https://akveo.github.io/eva-icons/#/?searchKey=face-sad&type=outline

figma library:

[Request] Icon related to food

Icons can be like restaurant_menu icon or fastfood icon from Material Icons

[Request] Like and Dislike icon

Hello, I love your icons and I'm using them in my current project!

Do you think it would be a good idea to add Like and Dislike icons? (Something like thumbs up and thumbs down)

I'm currently using heart for Like and I'm finding it hard to find a dislike alternative.

Wishing a nice day!

Apple icon

Hello,
i don't find the apple icon. Is there some plan to include?

Usage in static site generators

Currently, eva-icons only works in browser-environments. It would be nice to have the ability to use it in static site generators (like 11ty) as the generated SVGs are static and don't need to be generated in the browser, if they could be generated during the build.

Where's the CSS file if I want to use Icon Font

I'm not using React or Webpack, sadly, I want to use SVG but turned out icon font would be better option. Browsed the folders, I got the question.

Lovely icons BTW.

Change color on hover

This shouldn't be really hard. Should I wrap this icon into a child-parent structure as in the example from the home page?

<i data-eva="plus-circle-outline" data-eva-fill="#AAA"/>

Request: Icon for changing language

We need a better icon for changing language in a project that is currently using Eva. The most suitable icon right now in the Eva collection is perhaps the globe, but a globe can just as well (and, I think, more often) mean "change region".

Something like this would be nice. I personally prefer the "A文" symbol, but a globe in a balloon, or a globe combined with some other symbol signaling language, would be okay as well. A balloon by itself signals "chat" to me, and sound waves signal "text to speech" or "listen", so we should be careful with those.

Instagram Icon

Hello,
i don't find the instagram icon , perhaps facebook ,twitter ,google are presents
Best Regards

Is this just a fork of Feather?

Hey!

I love the look of these icons – seems like all the packaging process is from Feather though? Might be worth linking back to that repo.

How can i use an animation with JS?

Hello. first of all, it's good library the evaicons.

I have one question, how can i use an animation ( available 4 types ) with JS?

Can you make android icon? or Can you PR to other project such as Android-Iconics?

Hello!

I like this repo.

I want to use it in the android project.

Can you make android icon?
or
Can you PR to other project?
or
Can I PR to other project?

e.g) https://github.com/mikepenz/Android-Iconics

Is this repository no longer supported?

Is this repository no longer supported?

Add tests

Tests should be added for build icons process.

Default viewbox is bad

The default width="24" height="24" viewBox="0 0 24 24" has whitespace all around the icons, it is a real pain to deal with. There should not be any whitespace, the viewbox should be adjusted accordingly by default, if users want whitespace they can add margin to the element.

Icon request: emoji

Please add an emoji icon. Something that could be used to trigger en emoji picker.
The smiling face icon could do it https://github.com/akveo/eva-icons/blob/master/package/icons/outline/svg/smiling-face-outline.svg
Maybe add a small plus (+) sign.

Icon with Bottom Tab Navigator Not Working?

Hi,

How can i use these icons with React (createBottomTabNavigator) Navigation 4?

I have trid like this but not working.

const homeBottomTabNavigator = createBottomTabNavigator(
    {
        Home1: {
            screen: homeStack,
            navigationOptions: () => ({
                tabBarIcon: ({ tintColor }) => (
                    <Icon name="home" size={25} color="#900" />
                )
            })
        }},{
});

CDN is not working

The server responded with a status of 404 ()

[Request] QR code scan icon

Hi,

I'd like to request a "QR code scan" icon. We need it at a current project and it has a common usage.

Regards,
Stefan

Link to Twitter profile on akveo.github.io/eva-icons is broken

The link to the Akveo Twitter profile in the header on https://akveo.github.io/eva-icons/#/ point to https://twitter.com/akveo_inc, which does not exist.

The correct url seems to be https://twitter.com/akveo

Heart icon design

These icons are amazing, my only criticism is the heart icon. I see many icon packs design the heart like this (the technique using two circles + rotated square) which makes it seem generic and inorganic. Would it be possible to change it to something closer to Twitter's heart?

Installing to Vue-cli project

I've installeged eva-icons in npm

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuemerang from 'vuemerang'
import * as eva from 'eva-icons'

Vue.config.productionTip = false
import 'vuemerang/dist/vuemerang.css' //Vuemerang styles
Vue.use(Vuemerang)
Vue.use(eva)

new Vue({
  router,
	store,
	Vuemerang,
	eva,
  render: h => h(App)
}).$mount('#app')

It doesn't work. What am I doing wrong?

request for new icons

Feature request
Request you to add following icons:

• Language (for i18n)
• Accessibility
• Scatter chart
• Gauge chart
• Dashboard
• Heat map
• Credit cards (specific for popular brands like Amex, visa and master )
• For Maps:
  • Transportation types (cycle/bike, motor bike, walking, cab, car, rail, flight and bus)
  • Traffic light, traffic cone, tow-away, speed limit (20, 40, 60, 80) and other traffic signs
  • First responder (medical, fire, police).
  • Buildings (government, residential, hotel, individual house, apartment etc.)
  • Parking, parks, camping, tourist attraction, museum etc.
  • Routing
• Unlink (complement icon for link icon which exists)

Icon request: Regular car

I am building a ridesharing app, and would like for an icon to represent a car. Not the current truck that is available.

READ THIS BEFORE YOU INSTALL

Please do not use this!

The icons are not weird and not user friendly.
I've couldn't find half of what I needed.
Those 480 icons are not even 300, because half of them are the same.

Don't believe me?
Check the filled and outlined versions of: arrows, paper clips, bar charts, chevrons, corners, diagonal arrows, menu and so on.

Question: Icons Submission

I wanted to know if we can submit more icon designs to the pack? If so, is there any documentation about the guidelines for the designs?
Thank you.

Incorrect display of icons.

Issuer description in last comment #22

icons does not preview in ios.

I'm developing react native app in android platform icons are preview but in ios doesn't preview.

Suggestion: tree-shakable icons

The final size of pack has a significant impact at application bundle size.
It would make a great impact if we can implement tree-shakable icons using svg-to-ts for example.

https://www.npmjs.com/package/svg-to-ts

Improve README.md for Readability

Edit README.md for clarity and concision.

Incorrect Baseline

The baseline of these icons seems inconsistent to other font families. I am inexperienced working with fonts, are they designed to align with something else or does the ttf and woff2 versions not support an offset baseline?

This is causing the icons to look out of place.

As a temporary fix, I've added:

eva {
    vertical-align: -0.133333em;
}

Although this works temporarily. I can't be sure it will look good on a high density display, and it does not account for any fonts that need a different baseline.

Cant add eva icons in angular 8

Getting error Cannot resolve definitions for module 'eva-icons' on import * as eva from 'eva-icons'; in app-component.ts after installing via npm i have also added the <script src="https://unpkg.com/eva-icons"></script> in the index.html

No proper documentation to add custom svg icons

I want to add my customs SVG icons. But, I cannot find any proper guide or documentation to do so.
For example Whatsapp, Instagram etc icons missing

How about to create icons enum?

It's too boring to copy/paste icon names. What about enum like:

export enum IconTypes {
    GITHUB: 'github',
    HEART: 'heart',
    ...
}

And then use like:

<Icon {...style} name={IconTypes.GITHUB} />

Scissors icon?

Hi,
amazing work!

would you be able to add a scissors icon to go along with the clipboard and copy icon to make cut?

thank you very much in advance

Icon Request: Bank Icon

Icon to represent a bank.

Usually looks like an institution building with three pillars, e.g. https://materialdesignicons.com/icon/bank