I waiting until I get another client to buy ACSS but wow, everything on your channel for free is leveling me up. I used divi for an old client and almost lost my mind. Building my new portfolio with Oxygen now
My goodness, thank you for sharing this method. I just want to let everyone know that I had an issue with uploading my own custom set of icons that I exported from Figma where I could not add ONLY the icons I wanted but had to also include some or all of the IcoMoon's free icon library icons in the package that I downloaded. So my steps were 1. Export icon from Figma as SVG (the ones that I wanted to add to my website); note that there are plugins in Figma that allow adding icons from a variety of libraries 2. In IcoMoon App, import these SVG (I didn't have to handle any stroke outline issues in Illustrator so I didn't get any errors) 3. Select the custom icons that I imported AND some or all of the icomoon icons that are provided free 4. Click "Generate SVG & More" button at the bottom 5. Click "Preferences" at the top and uncheck the PNG checkbox, and check the "Add to definitions in symbol-defs.svg" 6. Click on "Download SVG" at the bottom and you'll get your zip file 7. Use VSCode to clear out any of the inline styling in the "symbol-defs.svg" file and import the file to Oxygen In step 3, when I tried to include ONLY my exported icons from Figma WITHOUT some or all of the icomoon free icons, then I ended up with a pure black square icon. Hope this works for others!
Excellent. I have one complaint. You should have made this a month ago and saved me three hours a couple weeks ago when I generated multiple icons for each color I needed :) Well done again.
This was once again super valuable. I first of all used the wrong method but could not get it to work properly so I just decided to use the image method. Lately I've been using the code block method. But I think I've just found the perfect method. Now we can really start creating cool icons and shapes. Thanks for sharing and a big shoutout to Andreiya for the solution.
this is a very good solution to the inability to quick export from illustrator. anyway, just to rant, i’m sure that macromedia would have a clean export by now.. since fireworks 2018 maybe.
One step you miss in Illustrator, hit command 8 to make all our path transparent before export SVG because sometimes you have bad render in Iconmoon if you don't do that. Nice video, I don't know the setup svg code file part before add it to oxygen. Thanks a lot.
Thanks for sharing, it's very helful. I have a question, when I first upload an icron set called "custom business icons" with 100 icons, what if future I want add another 15 icons but still keep it in this "custom business icon" group, should I upload these 115 icons with the name of "custom business icons" to overwite the old 100 icons? or just upload the 15 icons?
Hi Kevin! I saw again this video, do you know if it's possibile to load same icons in the WordPress editor, if for example I use custom fields or similar? Thanx!
Another great tutorial! Now I still need to find a way to use dynamic data to show the icons. Best I could come up with now is using conditions but that's only workable if you have a very limited set of icons.
Thank you! I also wonder how to add custom svg in a psuedo element while also using automaticss variables. I know a solution but not scalable! We would love to see another "RIGHT" way of doing stuff. 😆 You're a Godsend!
So, if I have followed this, can I then use MetaBox to apply one of the icons to a custom post type - for example, if I wanted an icon to be used for each different service, how would I do that? Thanks for the tutorial, btw!
Excellent video! I love that you go through all the tricks to make sure the icons are completely modifiable in Oxygen. One question, can this technique somehow be used to add icons to menu items? That would be a blast to do!
Hi Kevin. Awesome video, thanks for that. I have a question, this is the scenario. 3 months before delivered the project the customers wants to add 2 extra services cards with a custom icon each. We can update the iconset in order to place those new icons in each card or we have to replace the iconset (same name or we have to use a different name) and place each icon again on each service card? Sorry for my English 😅
Love this Kevin. I am building a site for a vacation rental network, and I downloaded some icons from Envato for standard hotel amenities. On the rental property template, I was going to use an ACF repeater to list the amenities for a property. Is there a way to use the icons for this, or will I need to add them as images to the media library ?
Great video Kevin, was wondering is there a way to use custom icons on a services cpt, eg assign an icon via a custom ACF field on a service as i want to output in a repeater.
ruclips.net/video/5kQDSOvcLPw/видео.html A link on How to do the Adobe Illustrator Parts of this tutorial in Affinity Designer can be seen here sorry I don't make videos and it is pretty fast but the icons generated using this method work I used the same Icon pack so you can see it all the same and for continuity
Hi Kevin, I've never edited the symbol-defs.svg code and never had an issue scaling or changing the colour of my icons, even on a class level. So I don't really understand why that step is necessary. I noticed that you added the defintions, which Elijah says not to do in his video "Using SVG Icon Sets in Oxygen (July 2020 Update)". If you have a minute could you explain why here in the comments? Also I have one question for you. Have you found a way to update that Icon Pack in oxygen without uploading an entirely new pack? That is one of my struggles is anytime I want to add more custom icons, I need to upload a new pack, when I'd rather just update the existing pack. Thanks! Cheers
Great! I wish this tutorial had been released when I first started to work with Oxygen! I remember having a lot of trouble understanding how to go around the SVG sets. Next up: Let client choose which icon to use from the dashboard through a custom field! I am currently using a mix of ACF Icon Picker and a custom Sprite but I'm sure there would be a better way of working with dynamic icons!
@@Gearyco I realise that if I delete my old icon library and re-upload the new one (which includes old icons + extra ones), oxygen populate automatically the deleted icons with the ones from the new library. I assume it is because the icons in the new library have the same names.
Great tutorial Kevin! One topic few talk about is the Privacy Policy or legal pages in general on websites. Do you ask the client to get them written? Or do you include that as a part of your website offering? How do you solve that part? 😀
Hi. Another great tutorial. Btw, can you make a tutorial about how to use Oxygen for external API (ex. RapidApi) ? I can't find any channel covering this issue.
Do you find it causing problem overtime to use custom CSS for restyling stuff on client sites that cant be changed using the built in options? #futureproof I got a video request too: An indepth video on future proofing client sites would be valuable, what to do and what to avoid 😀
![I Replaced ALL my ADOBE APPS with these [free or cheaper] Alternatives!](http://i.ytimg.com/vi/5EfqHg49kMk/mqdefault.jpg)
Which method were you using previously for icons in Oxygen?
Uploading Images.... Thanks Kevin!!!
All the WRONG methods - literally XD. Mostly code blocks that linked to a custom style sheet
your method but the WRONG way :D
you have a little smaller way of deleting all of that without copy 1 line, select all, paste and find, and replace
you select 1, press ctrl+f2, delete
I waiting until I get another client to buy ACSS but wow, everything on your channel for free is leveling me up. I used divi for an old client and almost lost my mind. Building my new portfolio with Oxygen now
Keep up the good work!
My goodness, thank you for sharing this method. I just want to let everyone know that I had an issue with uploading my own custom set of icons that I exported from Figma where I could not add ONLY the icons I wanted but had to also include some or all of the IcoMoon's free icon library icons in the package that I downloaded. So my steps were
1. Export icon from Figma as SVG (the ones that I wanted to add to my website); note that there are plugins in Figma that allow adding icons from a variety of libraries
2. In IcoMoon App, import these SVG (I didn't have to handle any stroke outline issues in Illustrator so I didn't get any errors)
3. Select the custom icons that I imported AND some or all of the icomoon icons that are provided free
4. Click "Generate SVG & More" button at the bottom
5. Click "Preferences" at the top and uncheck the PNG checkbox, and check the "Add to definitions in symbol-defs.svg"
6. Click on "Download SVG" at the bottom and you'll get your zip file
7. Use VSCode to clear out any of the inline styling in the "symbol-defs.svg" file and import the file to Oxygen
In step 3, when I tried to include ONLY my exported icons from Figma WITHOUT some or all of the icomoon free icons, then I ended up with a pure black square icon.
Hope this works for others!
Excellent. I have one complaint. You should have made this a month ago and saved me three hours a couple weeks ago when I generated multiple icons for each color I needed :) Well done again.
I can't tell you how many times I've done it that way!
This was once again super valuable. I first of all used the wrong method but could not get it to work properly so I just decided to use the image method. Lately I've been using the code block method. But I think I've just found the perfect method. Now we can really start creating cool icons and shapes.
Thanks for sharing and a big shoutout to Andreiya for the solution.
Thank you Kevin & Andrea 😀
Thanks a lot for the info. Was using this method, but not doing the color part, so I was not being able to change colors. Awesome!
Another great tutorial to put in the pocket! Thanx!
this is a very good solution to the inability to quick export from illustrator. anyway, just to rant, i’m sure that macromedia would have a clean export by now.. since fireworks 2018 maybe.
First video i already knew how to do it. All your videos are gold! Thank you kevin!
💪🏻
Remember when exporting the icons with fill to make them all the same color. Otherwise you need to replace/remove multiple colors in a code editor.
Thank you, Kevin. I had been using images, and this helped a lot because I can use a background image behind the custom icons as well.
Huge save for my new project, thanks as always Kevin 🙏
One step you miss in Illustrator, hit command 8 to make all our path transparent before export SVG because sometimes you have bad render in Iconmoon if you don't do that. Nice video, I don't know the setup svg code file part before add it to oxygen. Thanks a lot.
Awesome Kevin, that's exactly the way I do it so now I know I've been doing it right!
Thanks for sharing, it's very helful.
I have a question, when I first upload an icron set called "custom business icons" with 100 icons, what if future I want add another 15 icons but still keep it in this "custom business icon" group, should I upload these 115 icons with the name of "custom business icons" to overwite the old 100 icons? or just upload the 15 icons?
Hi Kevin! I saw again this video, do you know if it's possibile to load same icons in the WordPress editor, if for example I use custom fields or similar? Thanx!
This saved me! Thank you
Another great tutorial!
Now I still need to find a way to use dynamic data to show the icons. Best I could come up with now is using conditions but that's only workable if you have a very limited set of icons.
Thank you! I also wonder how to add custom svg in a psuedo element while also using automaticss variables. I know a solution but not scalable! We would love to see another "RIGHT" way of doing stuff. 😆 You're a Godsend!
Wonderful video, thanks. Yes, whenever it comes to icons and svgs it tends to bog me down.
So, if I have followed this, can I then use MetaBox to apply one of the icons to a custom post type - for example, if I wanted an icon to be used for each different service, how would I do that? Thanks for the tutorial, btw!
Excellent video! I love that you go through all the tricks to make sure the icons are completely modifiable in Oxygen. One question, can this technique somehow be used to add icons to menu items? That would be a blast to do!
Request - do you have a method of doing this with oddly shaped svgs like logos? The problem I run into with the odd shapes is sizing and margins
🙌🏻 thanks Kevin!
If only it was possible to like multiple times :3
Hi Kevin. Awesome video, thanks for that. I have a question, this is the scenario. 3 months before delivered the project the customers wants to add 2 extra services cards with a custom icon each. We can update the iconset in order to place those new icons in each card or we have to replace the iconset (same name or we have to use a different name) and place each icon again on each service card?
Sorry for my English 😅
Great Video
Thank you. Do you know how and if I can use those icons into an ACF field ? I love using icons instead of images.
Love this Kevin. I am building a site for a vacation rental network, and I downloaded some icons from Envato for standard hotel amenities. On the rental property template, I was going to use an ACF repeater to list the amenities for a property. Is there a way to use the icons for this, or will I need to add them as images to the media library ?
Depends on how your template is setup, I suppose. You can't pick icons via ACF in any way that I know of, though.
Great video Kevin, was wondering is there a way to use custom icons on a services cpt, eg assign an icon via a custom ACF field on a service as i want to output in a repeater.
Unfortunately it doesn’t look like there is.
Hi there, is it possible to use such a method in Bricks Builder as well?
Not sure, I haven’t looked into how bricks handles icons.
Great tutorial again!
Is there a way to control 2 color icons in oxygen an easy way ? Like Font Awesome Duotone ?
Duotone works. It uses a lightness change to make part of the icon lighter I believe. Not two separate colors though.
ruclips.net/video/5kQDSOvcLPw/видео.html A link on How to do the Adobe Illustrator Parts of this tutorial in Affinity Designer can be seen here sorry I don't make videos and it is pretty fast but the icons generated using this method work I used the same Icon pack so you can see it all the same and for continuity
Could you please do this modify this same tutorial for Bricks Builder?
It doesn't really have to be done for Bricks. Bricks already supports custom icons.
Hi kevin I love this Tutorial, do you know if there is a way we can do this at bricks builder?
Bricks supports custom icons through the icon element.
Hi Kevin, I've never edited the symbol-defs.svg code and never had an issue scaling or changing the colour of my icons, even on a class level. So I don't really understand why that step is necessary. I noticed that you added the defintions, which Elijah says not to do in his video "Using SVG Icon Sets in Oxygen (July 2020 Update)". If you have a minute could you explain why here in the comments? Also I have one question for you. Have you found a way to update that Icon Pack in oxygen without uploading an entirely new pack? That is one of my struggles is anytime I want to add more custom icons, I need to upload a new pack, when I'd rather just update the existing pack. Thanks! Cheers
Hi Jake! actually Elijah says to make sure that the box is checked (as you can see in official Oxygen documentation too)
You don’t have to edit the defs file if the SVGs don’t contain inline styles. I was showing the worst case scenario to cover all bases.
@@andreamaccone ahhh thanks I am recalling incorrectly. Good to know!
@@Gearyco I still don't understand what scenario that would be? If the scaling and colouring already works, what pitfall is there?
Great! I wish this tutorial had been released when I first started to work with Oxygen! I remember having a lot of trouble understanding how to go around the SVG sets.
Next up: Let client choose which icon to use from the dashboard through a custom field!
I am currently using a mix of ACF Icon Picker and a custom Sprite but I'm sure there would be a better way of working with dynamic icons!
Appreciate you videos but the creative account I won't have on principal...I have CS6 and that works for most stuff even today....;)
Very good tutorial, thanks! Is there a way of adding new icons to an existing icon library in Oxygen?
Unfortunately no. So I recommend adding the entire icon library or pack instead of select icons.
@@Gearyco I realise that if I delete my old icon library and re-upload the new one (which includes old icons + extra ones), oxygen populate automatically the deleted icons with the ones from the new library. I assume it is because the icons in the new library have the same names.
@@etiennemansard2673 Ah, that's good to know.
Great tutorial Kevin! One topic few talk about is the Privacy Policy or legal pages in general on websites. Do you ask the client to get them written? Or do you include that as a part of your website offering? How do you solve that part? 😀
We include it. We use termageddon.
Superb sir 👍
Thanks!
Hi Kevin! Thank you for your great explainations! :) Do you have any idea how to deal smart with the duo color icons from font awesome? :)
They work just fine. Are you having issues with them?
Hi. Another great tutorial. Btw, can you make a tutorial about how to use Oxygen for external API (ex. RapidApi) ? I can't find any channel covering this issue.
I am not an API developer unfortunately
can i recreate gallery in elementor with oxygen, i have issue with oxygen slider. great video sir
sorry for my english
slider that contain multiple image, then become 1 image in mobile
I wonder if this also works for Bricks? :)
Bricks supports custom icon upload already
Do you find it causing problem overtime to use custom CSS for restyling stuff on client sites that cant be changed using the built in options? #futureproof
I got a video request too:
An indepth video on future proofing client sites would be valuable, what to do and what to avoid 😀
No, custom CSS is very important. I never hesitate to write css on client sites. It’s part of the process.
@@Gearyco Thank you Kevin! 😀
SUBSCRIBED!
🌟 🌟 🌟 🌟 🌟
You can also just color all icons in Illustrator black (#000000). That is easier.
I'm not sure how that helps. If the color is set as black inline in the SVG, you won't be able to override it with a class?
You dont need to edit the code.. just remove the color before make the zip
BIG PROBLEM NOW SOLVED
This is terrible, what a god aweful way to just upload an svg