Difference from included icons and http://ionicons.com/

Ionic Framework ionic-v3
1

I’m not sure what are the difference between the ionic icons included in ionic documentation

and the premium icons which are always from driftyco you and can find here
http://ionicons.com/

I had a look to them and I think in http://ionicons.com there are much more icons then included in the ionic framework and in the ionic framework there are still custom icons for windows/ios/android on the contrary in http:/ionicons.com there are only one stile similar to the material design one?

How can we use the more beautiful ionicons instead of the standard framework icons?

This is the github project for them

2

Some information about this?? :slight_smile:

3

I haven’t really noticed that there’s more, what I have noticed is that maybe half of them aren’t even called the same, despite being the same icon. All I want is a list of what the icons are called, so I don’t have to look them up in the CSS when I need them… Is that at least a thing?

4

No there are many many many more icons on ionicons.com

For example this icons don’t are in ionic2 framework icons!

image

I don’t know what is the difference between this icons and the framework icons and I can not find nothing about it, which we could use and how we can replace the standard icons.

In ionic2 project they include the npm package “ionicons” in version 3.0.0 which should be this https://www.npmjs.com/package/ionicons where is linked to this github project https://github.com/driftyco/ionicons where is the link to this http://ionicons.com/

But the problem is, The icons in the include npm package are not the same icons we see in http://ionicons.com

I’m a littlebit confused.

:cold_sweat:

this is my github issue in ionicons

5

@mhartington are you able to answer this small question? :wink:

1 Like
6

Hey, so the icons from ionicons.com are the older version meant for ionic1.
The package version for that is ionicons 2x

These icons

Are the icons meant for Ionic 2 project.
The package version is 3.x.

As for “missing” icons, many of the icons were renamed to something clearer
For example, in ionicons 2.x, we have ion-chevron-down, but that could be confusing to people who dont know what a chevron is.

So for ionicons 3x, we renamed them to arrow.

image
Screen Shot 2017-02-16 at 11.07.57 AM.png1701×160 14.2 KB

Long and short of it, if you need an ionic 1 reference, use http://ionicons.com/
If you need a Ionic 2 reference, use http://ionicframework.com/docs/v2/ionicons/

1 Like
7

How I never noticed the “Ionicons” item in that menu, I do not know… Thank you so much! Maybe it would be worth pointing that out on the ionicons.com site :wink:

1 Like
8

okay thank you

the thing which was confusing me, also on the branch 3.0.0 you link to the http://ionicons.com page where are the old icon set.
And the other thing I see only now, on the 2.0.1 there are also 3 sets of icons
ion-android-*
ion-ios-*
ion-*
So there are not really more than now in 3.0.0 :slight_smile:

For our project wee need so many more md icons for example the official from google

Is there a way we can include some of them and use them as in ion-icons or ion-button or ion-list??
This would for sure helpfull for many of us

thx so much

9

There indeed more icons in 3.0

They are just organized differently, using the ios-, md- prefixes.

10

Are there some missing as well? Is there someway to find the new names easily? I’m looking for the edit icon and cannot seem to find it.

11

@JonnyG I think you are searching this? https://ionicframework.com/docs/ionicons/

12

[quote=“mburger81, post:11, topic:79448, full:true”]
@JonnyG I think you are searching this? https://ionicframework.com/docs/ionicons/
[/quote]Yeah, I was searching for edit there and not finding it. But found it in the old list, http://ionicons.com/. I have found what looks like the replacement, “create”. But it took scrolling through all the icons.

Jon

13

Ok but http://ionicons.com are the old one for ionic1 and not used for ionic2/3

14

Yeah, hence my problem. I found an icon I wanted to use, and it wasn’t in the newer icon set.

15

It might have been renamed, try some synonyms. Which icon are you missing?

16
17

I think the MaterDesign Icon for CREATE should do the work??

image
image.png1334×154 1.69 KB

18

Yeah, that’s the one I found.

19

Then I’m not sure I understand the problem, as they’re almost 100% identical. Is this the only example you have, of icons that are supposedly missing? :slight_smile:

20

Here is my original question:[quote]Are there some missing as well? Is there someway to find the new names easily? I’m looking for the edit icon and cannot seem to find it.[/quote]
I ended up finding it by scrolling through all the icons till I found one. I don’t know of any others, but haven’t spent any time looking.