
Ikonate – fully customisable and accessible vector icons - docuru
https://www.ikonate.com
======
mkl
"Do not resell or redistribute the icons, even for free." But they gave them
the MIT License, which explicitly allows those things...

~~~
mikolajdobrucki
You're right, this didn't make any sense. I updated the README accordingly.
Sorry for the confusion!

~~~
ivanhoe
You also have a little typo in README, under License: "Attribution IN much
appreciated", instead of IS

~~~
mikolajdobrucki
Thanks a lot, next this will fix this one too!

------
jlg23
I only checked a few raw icons and I am impressed: They are fully stripped of
superfluous markup introduced by SVG editors; that was something which I had
to implement over and over again for customers' build pipelines.

Also, the possibility to download a custom styled set is great: With all other
icon sets I ended up either modifying them myself in a text editor or received
a bunch of modified files from the graphics person in the project - but
bloated with markup I needed to strip afterwards (see first point).

~~~
scotth
Are you familiar with svgo?

~~~
jlg23
Yes, but my clients usually don't want to add node to their infrastructure (I
do CL) and, after all, the basic cleaning of SVGs is simple: Filter XML with a
whitelist of namespaces.

------
tribby
> Ikonate is the very first icon set of this kind designed to be fully
> accessible*

> * Ikonate is NOT accessible out of the box and will never be. We've done our
> best to follow the best accessibility practices while building this
> software, but it's your role to adjust it and make it truly accessible
> inside your project.

these are incompatible statements. the author should just not call it
accessible.

also -- why "will never be"? there are ways to make it more accessible, if not
perfect. one idea: turn the icons into a truetype GX variable font with a
weight axis that increases as viewport size decreases using media queries.
that would increase out of the box legibility considerably.

~~~
Nadya
I handle ADA issues at work and deal with updating sites to adhere to WCAG
2.0. So perhaps I can offer my $0.02 and clear this up.

It is actually impossible for anything to be accessible out-of-the-box, but
they have been designed to be accessible and have sane defaults. Those
statements do not contradict one another.

For example, if you use a magnifying glass icon to mean "zoom" but their
default title text for a magnifying glass is "search" then it is not out-of-
the-box accessible even though it was designed to be fully accessible. They
even mention this scenario (generically, not specifically) in their
disclaimer.

>E.g. all the titles and descriptions given to the icons should be treated as
placeholders and changed in implementation depending on an actual role of each
icon. In many cases, you may not need them altogether

Having the placeholders there is questionably good - it would be better to
have the attributes _there but blank_ in my opinion. It will do more harm than
good being wrong than being blank, but that's a difference in preference for
implementation.

~~~
mikolajdobrucki
You're right that placeholder may do more harm than good and it's questionable
if it makes any sense. Still considered it a better option though at that
point

~~~
Nadya
Would need data about whether or not people are more or less likely to

1) Add text when it is missing but the attribute is there to serve as a
reminder

OR

2) Change text when it is wrong

Neither one is "wrong" but one might be better than the other.

~~~
mikolajdobrucki
100% agree. Right then I was just blindly guessing ;)

------
wodenokoto
Kinda related: It seems clipart died with Google image search and the only
alternatives I can find are things like the noun project[1] or fontawesome[2]
both of which require a subscription, rather than a purchase, and neither
really fills that clip art use-case.

I'd love to purchase a clipart set like in the old 90's days of power point.

[1]
[https://thenounproject.com/accounts/pricing/](https://thenounproject.com/accounts/pricing/)

[2] [https://fontawesome.com/pro](https://fontawesome.com/pro)

~~~
sabizmil
There's also [https://www.flaticon.com](https://www.flaticon.com)

------
dlbucci
Really cool! I kinda wish I had thought of it :) Any thoughts to adding
further parameterization to icons? Like altering the length of the handle of
the magnifying glass or something?

~~~
docuru
Hey, I share the project but I'm not the author, I just think it's pretty cool
too

------
pzo
Nice collection. Would be nice to easily create icon with just any text
similar to already included HDR icon to accommodate e.g. ISO, WB, I/O, HD etc

------
billfruit
I can't find a link to it, but I remember reading a discussion, that if you
want icons/images for fixes known sizes and resolutions, it is better to have
rasters than vectors: I think, mostly to do with scaling of line
weights/widths, vector scaling of these often results in ungainly images while
a raster of a given native resolution looks clearer/better more proportionate.

~~~
sjwright
To the extent that might have ever been true, it would have been because of
the limitations of very low resolution displays, or to work around limitations
in the vector rasterizer.

In any modern context, a vector is always preferable as it will generate the
best output for an unlimited number of sizes, resolutions and contexts.

~~~
billfruit
The question may have been the scaling of line widths in a linear fashion
while using vector images, which isn't that pleasing to the eye, compared to a
hand crafted raster with more eye pleasing line width for a give
size/resolution. May for aesthetic reasons line widths may require to be
scaling in a nonlinear way?

Scaled vectors will have mathematically correct line widths, but to a human
perception the line may appear to thick/thin for the image size, than which a
raster artist would have used if they were creating a native raster of that
size.

~~~
raphael_l
But the scaling of bitmaps would have the same problems, wouldn't they? Or do
you mean custom icons per given resolution/size?

~~~
billfruit
I meant that custom unscaled raster icons per resolution/size looks better
than a scaled vector image.

------
docuru
Thanks for all the feedback, I tweeted the author about HN link, and someone
has created a thread on GitHub. Hopefully, it will help him clear things up
about the license. I believe it is not his intention to confuse us. Anyway, it
is a cool tool and big thumbs up for the author!

~~~
mikolajdobrucki
Thanks a lot for the heads up! It's fixed, I already updated the README. Sorry
for the confusion caused.

------
hgasimov
Obviously very nice looking icons. It would be even better to be able to
download them as font. Then one can customise the icons later on his/her own
website using CSS (text-color, background-colour, font-size, etc).

------
baxtr
I played around with it and have to say that this is just great. The only
option that I did not understand since it didn't change anything was the
"style" button. What is that for?

~~~
illuminati1911
Rounding (or not) the edges/corners of the objects within the icon.

~~~
ltc5505
Did the button work for you? It didn't for me.

~~~
X-Istence
Set the size of the icons really large, and then switch between the options,
it does affect them, but very very minimally.

------
kowdermeister
This is pretty neat, cool name, it goes to my loved bookmarks :)

One thing though I don't get is the 0 border width setting. Is that useful
somehow?

~~~
Hendrikto
Afaik, its a workaround for IE.

------
aasasd
Note that there's a vaguely popular site named ‘icons8’ on about the same
topic, so some confusion might ensue in the future.

~~~
HenryBemis
Heh, I wonder if Mikolaj will respond to this comment. I don't think it's a
coincidence. Some spill-off traffic never hurts. Although the icon8 owner may
frown upon this.

------
arusahni
There's a certain irony in having the link to the accessibility disclaimer be
so hard to target.

------
Elect2
off-topic question: what library the site is using for these icons:
[https://imgur.com/a/GVVi3TQ](https://imgur.com/a/GVVi3TQ) , I really like 3d
icons.

~~~
highesttide
Those look like standard OS font emoji

~~~
tornadon
More specifically the ones in that screenshot look like the versions you’d
find on iOS/macOS. Just thought I’d mention it in case someone was viewing it
with say an Android device it would look different [1].

[1] [https://emojipedia.org/hammer-and-pick/](https://emojipedia.org/hammer-
and-pick/)

------
shemeroni
Pretty cool. Will use it in my projects for sure. Thanks mikolajdobrucki :)

------
hgasimov
Oh, wow. Thanks a lot to the owner of this web site.

------
8lall0
Nice job! The spritesheet is the best!

------
mezod
what would be the most reasonable way to "fill" these icons?

~~~
nacs
You'd have to do that manually with Adobe Illustrator/Sketch/Affinity Designer
or some similar vector editing software.

The Github has the raw SVGs you can download and edit.

~~~
mezod
Thanks!

