How to Properly Use & Manage Custom Icons in Oxygen (No Images or Code Blocks!)
Vložit
- čas přidán 28. 07. 2024
- Oxygen already has a tutorial on importing icon sets - this is not a repeat of that. In this tutorial I'm going to walk you through step-by-step how to use custom icons (not from pre-made sets) in Oxygen even if you're given improperly formatted SVGs ... and even if you're not given SVGs at all.
I'm also going to show you the pitfalls of using SVGs as images (what most people do) and I discuss some pitfalls of using SVGs in code blocks (what a lot of other people do).
In the end ... the method I teach here is what I believe to be the best and most scalable method of using custom icons in Oxygen because it puts them all in a gallery to easily insert/swap and gives you global control over their styling with classes.
If you use a framework like Automatic.css this also means that your icons will be completely compatible with sweeping global color changes!
If you've struggled with custom icon management in Oxygen in the past, you're going to love this tutorial.
Make sure you hit the thumbs up and a drop a comment if you got value! If you want to see more from me, subscribe to the channel as well!
Automatic.css: automatic.css
Join the Inner Circle: digitalambition.co/inner-circle/
Envato Elements: geni.us/Ci9Rlz8
0:00 Intro & Context
01:22 Setting Up Our Icon Cards
03:23 Important Icon Properties
04:12 Choosing an Icon Set
04:55 Formatting the Icons (Wrong Way)
07:45 Using the Icons (Wrong Way)
10:32 Fixing SVG Stroke Issues
12:47 Importing SVGs to IcoMoon
14:11 Removing SVG Inline Styling
16:32 Importing Icons into Oxygen
17:24 Using Your Icons
20:07 Recap
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
Thank you Kevin & Andrea 😀
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.
Huge save for my new project, thanks as always Kevin 🙏
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.
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!
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!
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!
Awesome Kevin, that's exactly the way I do it so now I know I've been doing it right!
First video i already knew how to do it. All your videos are gold! Thank you kevin!
💪🏻
Another great tutorial to put in the pocket! Thanx!
Those are good practices for using icons in any page builder, actually, and graphics designers are often not aware that SVG's are much smarter for web. Thank you so much for sharing. I really appreciate your pace and clarity when making these videos. --- "Naming this folder WRONG" 😆
!
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.
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!
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.
This saved me! Thank you
🙌🏻 thanks Kevin!
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!
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!
Great Video
Wonderful video, thanks. Yes, whenever it comes to icons and svgs it tends to bog me down.
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.
Superb sir 👍
Thanks!
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.
Thank you. Do you know how and if I can use those icons into an ACF field ? I love using icons instead of images.
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. 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 😅
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!
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!
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.
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.
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
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.
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
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.
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!
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.
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 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.
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'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?
Appreciate you videos but the creative account I won't have on principal...I have CS6 and that works for most stuff even today....;)
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
czcams.com/video/5kQDSOvcLPw/video.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
SUBSCRIBED!
🌟 🌟 🌟 🌟 🌟
If only it was possible to like multiple times :3
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?
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! 😀
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