 Thank you so much for coming. This is going to be a bit of more technical presentation, so I just want to know how many of you are web developers here? Okay. So it's a bit at the bridge between designers and web development. Also, I'm going to present how we implement this concept inside the Xfiki, but if you have something similar in your product, I would be very curious to see how you did it. So for the people that don't know what Icon teams are, the most similar concept are our color teams. So user always wanted to have different colors or their favorite colors. Then in the past, we did that with alternative stylesheets. So if we wanted to provide for three colors, you have two different stylesheets, one with red, blue, et cetera. But when the bootstrap framework became more popular, and actually when preprocessor had variables in CSS, then the customizations of the themes become much more complex. So not just colors, but now you could change the typography, you could change the borders, the margins, so a lot of other things besides colors. But one thing that was always missing was the ability to switch the icons. And for some that might be something very not important, so why would you do that? But for designers or for users, or if you want to have your interface consistent and maybe go through the new technologies changing that it's important. So I'm going to tell you a bit about the history of how and what themes we needed to apply to our platform. So and I'm sure many of you that contribute to open source project hit this wall too. And the themes I'm going to compare are silk, glyphicon, phantasm, and material. And I don't know how many of you used the silk icon. It was an image icon, so in 2009 it was used. So nobody from here? You still do? I used to, okay. So in that period of time silk was very popular. It had the three lines and it had over 1,000 icons. So for something that was really in that period, it was very nice to have. The problem with silk was that it was only 16 pixel by 16 pixel. And also in that period of time, Internet Explorer 6 was popular and Internet Explorer 6 had problems with transparency. So people needed to use the GIF format. And when we finally dropped Internet Explorer 6, we needed to go all over the code base and replace that GIF with PNGs in order to have a proper transparency. And this might sound like an easy change. So just the final name is the same, just change the format. But if you need to go in multiple places, and also if you're extensible, and you have extensions that you cannot control, and you rely on outside contributors to change them, that might be a problem. For the record, this is how an interface would look like with silk icons, and this is how it will look with phantasm. There was this switch from image sets to font icons, and all the web started to be monochromium. So before we had lots of colors on the icons. Now everything was looking like this. But one of the big advantages why people made this switch to icon sets were because in that period of time, we needed to provide responsive interfaces. So 16 pixel by 16 pincels was not yet enough, and we have the mobiles and lots of resolutions. So also in that period time frame, Bootstrap started to became popular, and when they launched their two and three version, they provided by default the glyphicon set. The glyphicon set was not a free set, but they had some sort of agreement, and it was a nice alternative. One of the downsides of glyphicon was that it only had 200 in icons. So if you were a platform and you wanted to switch to this new font technology and to Bootstrap, you had like a downgrade of the icons you could use, and if you have applications and those applications have dedicated icons, that was a big problem. So we also wanted to find an alternative, and that font awesome was one, 700 was kind of okay for us. One note more about glyphicon. If you're using the Bootstrap three version, and now you wanted to switch to Bootstrap four, so Bootstrap four launched like two months ago, you had another problem. Glyphicon was erased, they were not bundling anymore, they tell you that you should look for alternatives. So you had three choices, either you don't upgrade, either you stick with glyphicon, but you pay the license, or you find an alternative. So this might be, you might have found yourself in the situation of again needing to change the icon set you are using. Again, a comparison of how glyphicon and photosim looks like for users, they might say it's looked kind of the same, not many differences, so a good alternative. So now we want from icon image set to switch to icon set. So we have a problem of how we are using these icons inside our code. So on image you're using the image IMG tag, while if you want to use phone sets, they say that you need to use a span or an italic tag, and you give the name of the icon in the CSS class name. So it was not that simple anymore, like switching from GIF to PNG, you needed to switch the whole tag. And this was not the only problem, the problem is that if you want in your interface to have icons, there are two types, there are inline icons and decorative icons. So for example, and all the font sets, they were promoting to use the inline version. So in the inline version, you said this is the image, and then you have the label, compared to the decorative images, where you have the label, and the image is on top of the CSS in the background image. And there are multiple ways why you would want to have the decorative version, one of them is print, so if you want to have your page printed and you don't want those images to appear on your print, they should be external, also separation of concern. So the code is in one place, the styling is in another, and another reason are also screen readers. So when a screen reader goes over the syntax, and it finds that image, it will try to read it, and it might be an image, it might not make for the sense, it will crowd the user with things that it doesn't need, or if they were to use the fonts, that font maybe is not supported by the screen reader, and would read something like Gibrish, and so the flow of the user, when he read something might be disturbed. So we have different ways of entering sets, and also different ways of using them. So we need to find a solution for these problems. Another thing was that half the years passed by, the web standard community started to say that, okay, everybody is using icon sets, but maybe they were more hackish and they were not meant to be used like this, and the proper way to use them are SVGs, so everybody should switch to SVGs, why are we using icon sets and font sets? Another thing that in 2014, material design specifications become popular and everybody wanted to use them, they were very well documented, they were also consistent with Android, so if you had a mobile application or a web application, there was something that you might need to switch to. This is how material design looks compared to Fontason. One thing that you might notice is that material design has slimmer icons. Let's say that this was fixed by Fontason 5 when they released, they provided three different sets, so they have regular, solid, and light, but the solid and light versions, you need to pay for them, so still one set. Yeah, and that's how material looks. Also, the version four of Fontason had only the icon font, while in material, if you wanted to use the set, you could have used individual images or image sprites or individual SVGs or SVG sprites or if we were to take the common denominator between sets and try to find the solution that it goes, at least for fonts, the same way in material design, they are using actually typographic ligatures. Instead of providing the name of the class in the name of the icon in the CSS class, they're using inside the content. So again, another discrepancy in usage. Mom, so a lot of people are kind of confused of, okay, if it's a new project, which version should we pick? Should we pick the font technological version or the SVGs or the images? And mostly it depends on what you want to do, but as a general consensus, SVGs are considered more powerful and that's because the browser styling is more extended and also if you want to have animations. But in our case and what I'm describing here in the icon teams, usually use more icons for actions like save or edit and those icons are pretty basic. Doing animations on them is pretty overkill. So in this particular example, if either if you use fonts or SVGs, they are kind of the same thing. It depends if you want to do advance stuff on top of them. Okay, so what we want to do is no matter what icon sets we have, we want to be able to write it in a particular, in a single way. And that's why in Xfiki, for example, maybe it's a complicated solution, but that's what we had. We developed a service and you call the service that is the icon service and you tell them the name of the icon. And no matter what is the active icon theme, it will translate that in whatever syntax is needed. So this solution applies if you know that you have a big project and it's going to stay for a long period of time and you might want to switch technologies. It's useful when you have customization. So one user will want to have, I don't know, colorful icons or other we will want to have a special technology. So this is where having this abstraction layer came in handy because it will rapidly allow you to change the icon. And another thing, if you mark all your icons with using this system, all the icons will be consistent everywhere. So I'm sure you've seen open source project like they have some icons from one set and others because they didn't have the time to switch everywhere. Here you're just using an abstract version and it's changing from the set. Okay, so this is how it looks like on the code base or definition of icon themes. So we have two sections. One is general setting where we define the icon theme and then is the mapping. So for example, on silk, you would tell them that, okay, this is an image set while compared to font awesome that is a font set. And if you want to render it in HTML, you're going to use the image tag while on the font you're going to use the span. And this was important for us to provide multiple renders because wikis usually have their own syntax or support multiple syntax. One is their wiki syntax or markdown or whatever. And remember the example I gave you with the creative icons and inline icons. If you're having multiple renders, you can say, ECSS, I want this icon to be rendered using background image. So that was another use case that we needed to think about and solve. Okay, and the second part of an icon theme is doing the mapping. So for the mappings, we have like 250 names that should be defined by all the sets. So for example, if you want a home icon, in silk it should be house or in font awesome it's home and in home. But in your code, you just write home and depending on the mapping, he will know what icon or a glyph to bring. And if you're thinking of implementing or using a similar solution, I would ask you to reuse the work we did for these sets. And I also provide in the reference, there are other websites that do this mapping because the mapping can be kind of hard. So for example, in font awesome, you have just one icon that is useful for home. But in Ecom Moon, you have like three. Or in Ionicons, you have like four. So which one you pick. So here the designer or the person should be careful that all the icons should be consistent. And this decision you need to take. And those are fortunate examples. But if you want, for example, to map the add icon in material design, this will be all the solutions because they have generic icons like pluses and pluses with squares and et cetera. But they have also very specific. So add the user or add an icon. So depending on your application and what type of icon you need, you might need to extend the names of the icon theme you support. Okay, and what is nice about this solution is that you don't necessarily need to have support for a set that is well established. You can create your own set. So there are some icon set generator. And you can go there and select like, I want this social icon from this set and the social icon from the set and they generate you an SVG sprite that you can use in a project. So if you're a designer and you want to get crazy with your icons, you could make your own set. But it's not just that. You can consider this also from a performance point of view. So instead of embedding like 1,000 icons since you're using just 20 icons, make your set smaller and just load those icons without thinking about the others that you don't need. One thing to know is that since there are so many technologies when thinking about icon, icon themes try to find, as I said, the common denominator. So one feature needs to be supported by all the sets and one name for the icon needs to be present in all the sets. So some sets maybe they don't have an icon you need to find the replacement or maybe something generic. But if you still want to do advanced icon stuff, this you need to do them outside of icon themes. So examples of advanced stuff you might want to do with icons. So for example, animations and rotations. For sure the image set will not support that. So you still need to do them in the classic way but at least you will know that all the rest they will be easily changed or stacking. Fontasum had that ability to put multiple icons on top. So for example, like here and say that the camera is banned, this will need to be separate or there are some version of icons that them being on the SVGs and SVGs you can individually control different aspect of an icon, you can create your icons to be colorful. So when you map your set, you map everywhere to be colorful. And as I said, this is an alternative to the old image sets that were very colorful. Some sets for example, they have three different icons for the same. So that is zoom and depending on the resolution of your screen it might be bigger or different style like here. So the details you know they won't be seen on the mobile. So don't put the dots, put them only on big resolution. And another thing, some sets have support for right to left or left to right reading. So example of list or even all the arrows. Left might be the other way in that other perspective. Okay, so instead of just choosing one or SVGs or font or images, if you have this abstraction layer or this mechanism of easily switching you can support multiple and let the user decide what he wants and for example, if you need to create an accessible customization of your project for some people, provide them with the fonts or the icons that they need. And these are the other examples that I give. Maybe you needed to change the license or you wanted to be more performant or unload just a finite number of icons or maybe you were using a very small set and then you wanted to expand to multiple because you grew. All these are reasons why you should think about having this kind of system. And I know this applies for very large project and the open source. We kind, there are some organizations that span over the years and need to extend and they are the particular users of this use case. Okay. So thank you. Do you have any questions? Yes. I assume you have looked at a lot of icon sets? Yes. I don't know how to answer that. Floppy disk, no. Excellent. Yeah, because we don't have, I'm not using floppy disk and this kind of icon. I don't know how to answer this particular question. So I don't know. There were some like here, like the noun project where you could try to search for the floppy disk and see what sets they provide that icon and see if that set applies to your particular needs. Something else. Who from here is using SVG's icons in their project? Okay. And font sets? Okay. So the others are using images? Who is using images, no? Okay, sure, sure, sure. Yeah. So do you plan to switch from one technology to another or do you see reasons why you would want to this switch? So if you still plan to use images and you want to switch to another set, my recommendation would be to have a set that provide SVG's and maybe export the image format from that SVG. If you want to paint. So no, no, no, no, no, no, no, for doing vectorials and doing images, it's in Scape. So, yeah, that would be good to create them. Okay. So thank you so much.