Use icons in css?

[VismaTobbe]

Hi, I am using lucid (web) and esm and find my self wanting to use the icons in css for backgrounds. Is there a guide how to do this, or suggestion?

[jguddas]

That's such a good idea, we should write one.

I really like using
https://yoksel.github.io/url-encoder for that use case.

You can also do cool things using CSS masks such as setting custom colors.

[karsa-mistmere]

That's such a good idea, we should write one.

I really like using https://yoksel.github.io/url-encoder for that use case.

You can also do cool things using CSS masks such as setting custom colors.

Yeah, I've been eyeing implementing Lucide for SASS for a while now. Pure CSS is of course totally out of the question because of the lack of bundling, but implementing some SASS mixins for adding mask-image pseudo-element icons seems pretty straightforward.

[jguddas]

Adding a "Copy as CSS background image" button to lucide.dev could also be nice.

[karsa-mistmere]

Adding a "Copy as CSS background image" button to lucide.dev could also be nice.

We basically do have that already: