[SOLVED] Icons not showing up or coloring correctly in Pixelgrade Listable theme.


The Pixelgrade listable theme is very particular about how it likes it’s icons. There is a very specific set of rules you must follow if you want your icons to show up, and display correctly using the “currentColor” CSS class.

svg export recommendations

For starters use the above shown export options on your SVG (Adobe Illustrator CC 2016 shown). Beyond that you will need to follow several other rules.

  1. All graphics must be made in lines, NO FILLS. I have never been able to get a filled SVG icon to inherit the currentColor correctly.
  2. After you export and you are editing the SVG file to insert the currentColor class in place of your default color. You must replace any class that is titled sp0 with sp1 or an actual integer. For some reason it does not want to render any layers titled sp0.

Those are my best tips so far, I will keep uploading them if I can narrow it down even more. So far i’m about 7 hours into uploading icons and i’ve successfully gotten 3 to work…

5 Comments

Add yours
  1. 2
    CJ

    For once… a time when knowledge is power like the days of old. I was using decimal places 1 as they had said follow the guide… where it was telling me 1. Was wondering why the icons were showing up so small especially on the map pins… decimal 3 fixed all of that. Thanks!

  2. 3
    jan

    Do you know any website where i can download the icons directly in the correct format to upload them into listable? I will have about 80-90 categories that are a lot of icons 🙁

+ Leave a Comment