Render a set of specific internal links as Lucide SVG icons via CSS

Hey all! I’m struggling with rendering a set of internal navigation links as Lucide SVG icons (instead of text) using CSS. Attaching an image showing what I’m doing and the result I get.

What I’m trying to do


  1. Render a set of internal links in a note as Lucide SVG icons instead of the link text using a CSS snippet
  2. Ideally use a wrapper class to make styling a number of different sidebar notes in the future a little easier.
  3. Optionally improve/optimize my rule(s) in general

I’m able to successfully target the links (although I’m sure I could significantly improve on how I’m doing it) but the closest I’ve come to success is having the background rendered as a black splotch instead of as the icon, and the Inspector shows an error (see attached image).

Things I have tried

  1. Standard wiki links in a bulleted list, with a note CSS class, a wrapper CSS class/div and individual li classes (probably way overkill, but I want options for future development and can always get rid of some of these later)
  2. Used the data uri outputted by the SVG to Data URI encoder
  3. Tried three different CSS rules (only two of them shown in attached image).

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.