How to use the IconScout Color Editor to edit icons, illustrations and Lottie animations!

Key Takeaways

hi everybody Welcome to our new tutorial for Icon Scout in this video I am going to show you all about what I can scout scholar editor does and how we can use it in various ways so are you guys excited let's begin our editor is very useful when we want to change the color or apply the brand palette to the asset that you want to beat an icon illustration latte animation you can apply it everywhere is also discoverable by the Google search you can type out SVG color editor and it will pop up as one of the top pages of Icon Scout you can directly click over here and jump on our color editor let me show you around how we can begin with color editor and where you can find it so there are two ways to go into this color editor tool first you can open up the icon Scout website let's try to search something simple perhaps a rocket we can choose icons from here and we can search rocket here you will see different types of Rocket icon with different styles so for our purpose I'm looking for something more detailed I'm liking this let's click on it now we can see on the left we have two button which says recolor and my color so basically my color contains the palette that we have added before let's click on it you can also have a by default palette so that you can apply it over any asset for this video we are going to go with recolor option this is where all the fun begins so here you can see we have many options on the color editor here it says item color which basically contains the colors from design itself below that we can see brand color and these are the default palettes from color inspo so if you don't want to add any brand color you can directly pick it up from here for this video we are going to add our custom palette so by clicking upon this new you'll see this box which says on title so basically we are going to rename it to funky let's type in here funky below that you can see the plus icon and while clicking upon it you'll see the Color Picker where you can choose the color that you want to add so for this video I've already written down few hex code of the colors in my note itself so I'm going to write it down over here if you have copied your hex code to clipboard you can also paste it over here let's hit on ADD since we have four colors we have three more to go add let's add another one and then the last so here you can see we have our palette ready to get applied I'm going to click on apply and let's see how it turns out Tada we only added four colors over here but you can see in the icon that our smart editor has already applied other colors based on the palette that you have added so you can add as many color as you want no need to worry about other colors let's see one more example for this palette I'm only going to add this pink one and let's see how it turns out see so cool right on the item colors you can observe that our editor has picked up the sales of Pink by itself which makes it super easier to use on any assets so we learned about how to add custom palette but for example let's say you don't have any palette to add what will you do for that you can scroll down here you'll see the default palettes from color inspo up on a click you'll see it gets changed over the design you can switch it over here to see what palette goes right on your asset I'm also liking this one since it has high contrast pop colors you can download in various formats like PNG SVG and PDF for monochrome and Graton you can go over recolor option and you can pick up anything that you want I'll be covering more on that later in this video since it's an icon I would also like to place it inside a tile so I'll click on this box next to add tile here you can choose the shape you prefer I think I like it more with the circle type so I'll be going with this you can even adjust the icon and tile size so now I want to change the color of the style so I'm going to click on this color icon we can see here it has opened up the Color Picker you can change the tile color to the desired color using this slide or you can even paste your hex code directly here I am looking for light shade of blue this works fine for me you can even change the icon size so here you can see using this slider I have adjusted the icon size and I'm going to make tile size more bigger I'm quite happy with this now so now I'm going to show you how we can use the palette that we have just added on other asset too so for that we are going to close this down and you can see it over here which says my color by clicking up on it you'll see we have our existing palette in the place so you can directly apply it over here you can even switch between the palette let's scroll down and apply this palette on other rocket icon let's try this one you can see the palette we selected last by default gets applied over the asset pretty easy right we can even animate the icon in few steps so just I'm going to click on animate here you will see we have different presets of Animation effect so you can select the effect that you like and you can download it in MP4 GIF even in large animations isn't it cool so now we are going to try the same thing on the animations too for that we are going to close this down let's switch the tab here from icon to animation we can see bunch of Animation over here let's click on this one you can see the palette that we have added before it gets applied by default which makes it super easier to apply it over any assets so we have seen how we can utilize this palette over icons and animation now is the right time to see how we can upload our custom messages for that I'm gonna close this down over the header on the tools you can see the smart tools which has the color editor so I'm going to click on this it will open up in new windows here we have the ability to drag and drop so I am going to drag this and drop Inside the Box now you see our SVG is fully imported now it's the right time to play around with the palette that we have added before let's apply this one this palette isn't looking good on this asset maybe I want to go with single color let's see how it turns out I'm gonna play with blue let's add new palette hit on ADD apply since I've wanted in one color specific I would recommend you folks to go to the monochrome option so here at the top you see the color options first one is convert to monochrome and second is grayscale for now let's try to convert into monochrome currently I am going to aim it for kind of purple color so gonna go over the right and let's see how it turns out I'm quite happy with this let's try to see how we can convert in great on so for grayscale you can give a small tint of color to this gray cell by moving this bar if you want to completely grayscale no other colors are included you can give a tone value and adjust it from here if you are not happy with the outcome you can reset it anytime let's apply our previous palette here you can see we don't have the good skin color for that you can go over the item color you can pick up the skin color and you'll see the Color Picker let's try to make it more gray I'm quite happy with this one this is the way I wanted it if you want to go back to the changes that you just did you can even undo and redo finally last but not the least I want to show you how we can share the visuals with anyone by clicking up on this button you can click here in the copy it will copy the link to your clipboard and you can paste it anywhere one more exciting news we have my colors on the search too so for example we have searched for Rocket here we can click over here and we can apply the palette we want to add let's go with this one you can see it converts your search result into your desired palette you can even switch in between the palette so now we can access fully customized Library as per your palette so that's it I hope you really like the video and hopefully we'll grab some value from it thank you for watching see you soon cheers [Applause] [Music] foreign