⚡ Easier and faster way to import icons

Hey everyone :waving_hand:

Great news!

Now you can import icons directly from the “Asset tab”.

You can import your own custom icon set, or use the existing libraries by clicking “Manage icon sets.”

Don’t see a library that you need? Let us know, we’re working on expanding the list!

7 Likes

Cool. Is it safe to assume all of the existing libraries available are license-free for use on commercial projects?

That’s a hella good question. Also, will the Icon field be converted, ever? Next week maybe? :smirking_face: Currently it’s not supporting the new icons.

Do you have plans to add iconify to it?

Hey Eric, yes, all icon sets that we use are open-source :slightly_smiling_face:

1 Like

Hi Maria :waving_hand:

We’re already using Iconify (our current libraries), and we’ll continue to add more over time :slightly_smiling_face:

1 Like

Good stuff! Will icon packs that I added the old way stay available, or should I plan to replace them?

This came at the perfect time for me! Thanks WeWeb Team

Great work guys!!!
Are there plans to add component properties to adapt to this new icon selection standard?

1 Like

When using the material-symbols icon set, how can I change the ‘weight’ variation setting?

Is there any way to reduce the number of icons being packaged during deployment? The material-symbols set includes 7,000+ svg files that is just unnecessary.

I think they’re lazy loaded when you need them only, so it doesn’t affect performance. Might be wrong tho.

Might be the case, but when the GitHub integration is down and I’m watching 7,000 files being exported seems a bit ridiculous.

True, but I don’t think we’re gonna see any improvement anytime soon.

Nice, 50% of the way there, because after uploading SVGs as new icons, we’re still not able to change the color of them :frowning: Is this a known limitation and being worked on, or something we need to set on the SVG side?

3 Likes

Thanks for reporting this, we’ll look at it, I’ll keep you posted.

For anyone having issues with the color picker in the editor not working correctly for uploaded icons, you need ‘currentColor’ set up on the fill or stroke whenever you export the SVG.

There is a video tutorial in the documentation on how to do this in Figma: Icon | WeWeb Documentation

In the future, we’ll look to take care of this for you when you upload, but for now it needs to be configured in the SVG you upload.

When I add the icon property to a component it doesn’t seem to be mapping correctly. Is this a bug with the new icon standard or does it need to be done differently?

The new binding syntax is {folder name}/{icon name}

Like so:
image

You will need to make sure you have the appropriate Phosphor library installed in the ‘Icons’ menu of the ‘Assets’ panel in the top bar.

Why doesn’t the color selection for the phosphor fill icons work? I used the libaray from WeWeb.