Add IOTA icon

[Mrcuve0]

Issue: Closes #5516
Alexa rank: 48,669 (see https://www.alexa.com/siteinfo/)

Checklist

• I updated the JSON data in _data/simple-icons.json
• I optimized the icon with SVGO or SVGOMG
• The SVG viewbox is 0 0 24 24

Description

The original logo can be downloaded https://files.iota.org/media/IOTA_Logo.zip
The main hex value from https://www.iota.org/connect/brand
I followed the guidelines, all the tests passed

[PeterShaggyNoble]

Welcome to Simple Icons, @Mrcuve0 and thanks for the contribution 🙂

I think we can get away with using just the swirl here as they make it available in the second slide of the source page. Could you update to that, please?

For the source, you can use https://www.iota.org/connect/brand as well, rather than linking directly to the zip.

You can also omit the url entry from the license entry; that will be generated automatically on our end - the url entry is only needed for "custom" type licenses.

Colour's a bit tricky, based on their guidelines alone, I would agree with your choice of the green but, from their website, it looks to me like the "grays" are the primary colours and the greens the accent colours, what do others think?

[Mrcuve0]

You're completely right, I initially didn't catch the swirl logo and thought only the logo+text was available, I'm adjusting it right now.
As for the color, probably the "10pm" grey-blue is the right choice. As you pointed out the main site (and many other pages) follow variations on those blue-ish tints.

Can I go with the 10pm or shall we wait additional feedback?

[PeterShaggyNoble]

I'd vote for "Midnight" myself so, given that, you can hold off on updating the colour until we get a few more opinions, if you like, or just run with your choice of "10pm" for now.

[Mrcuve0]

Updates w/ the swirl and "midnight" theme. I also tested the preview with "10pm" but readability is a mess with that color.
Midnight is the one selected for now, let's wait for feedbacks 😊

• Midnight:
  

• 10pm
  

• Main Green
  

• Dark Green
  

[PeterShaggyNoble]

Thanks for the update, @Mrcuve0. However, I'm noticing some hairline thin differences in the right edges of a few of the circles - see example below of the 3rd circle in the top row of the left-hand "wave" with your version in red.

There could be a couple of causes for this:

• There could be subtle differences between the 3 source files and I'm not comparing to to the same on you based your icon on - I'm using IOTA Mark Black.svg.
• The circles are shifting or distorting slightly when combining them all into a single path - as happened to me when I tried unifying them in Inkscape, combining them produced better results.
• The precision need to be set a little higher during the optimisation process.

On the colour, we don't let how things look in our own use cases influence us*, we go with the primary brand colour or what we can best determine to be the primary brand colour, which isn't clear here. But let's hold off on any further updates to the colour for now, until we get the opinion of a few others. *We're actually in the process of building a new website, changing the layout and design so that icons are no longer sitting on coloured backgrounds for this very reason.

[Mrcuve0]

Wow thanks for the feedback! Sadly I'm a real newbie for what concerns SVGs and Inkscape in general. For instance, I had to search for the steps to complete some of the required operations. So I don't know if I'll be able to find similar differences like the ones you reported for the next iterations.

I used the IOTA Mark White file to produce the iota.svg file I pushed. I also used Ctrl-K (combine) to collect all the paths. Is there a better way to do that particular step? Finally, after having tried svgomg in action I'd be pretty sure it's just matter of increasing the precision over the level 3 as suggested, but as I said I'm definitely no expert 😆

I can try again with the same procedure I did and just changing the precision parameter on svgomg

[PeterShaggyNoble]

I used the IOTA Mark White file

OK, let me compare against that instead before you do anything else.

I also used Ctrl-K (combine) to collect all the paths. Is there a better way to do that particular step?

"Combine" produced the best results for me too when I tried; there was a lot of movement when I used "Union" (Ctrl + +) instead.

[PeterShaggyNoble]

Seeing the same difference when comparing against the white version, @Mrcuve0, maybe even slightly more pronounced. The good news, though, is that it's nothing you did wrong; after recreating it myself I was seeing the same differences when I optimised with a precision of 3 but everything lined up perfectly when I increased it to 4 so could you give that a try?

[PeterShaggyNoble]

SVG looks spot on to me now, @Mrcuve0, nice work 👍🏻

Gonna merge this in as is with the "midnight" colour and, if someone feels strongly enough that we should be using one of the greens instead, we can address that in a separate PR.

Thanks again for the contribution 🙂