How to see the icons available in Obsidian
Posted on June 13, 2024 - by Andy Cinquin
ObsidianLucidPluginsIconsTutorialMethodStep by stepUse
Currently, Obsidian supports Lucide, but not the latest official version. According to one of the developers at Obsidian, "we are always a few months behind." After searching for an up-to-date list of usable icons, here is a method to see all the plugins and those that work.
How to View Available Icons in Obsidian (callout / ribbonIcon)
- Create an empty folder and name it
lucide-static. - Install Lucide with the command:
npm i lucide-static - Navigate to the directory
node_modules -> lucide-static -> icons. - Create a file named "liste.bat" with the following content:
@echo off
setlocal enabledelayedexpansion
REM Output file names
set OUTPUT_FILE_SIMPLE=liste_fichiers_svg.txt
set OUTPUT_FILE_SPECIAL=liste_fichiers_svg_special.txt
set OUTPUT_FILE_SPECIAL_PLUS=icons_obsidian.md
REM Delete output files if they already exist
if exist %OUTPUT_FILE_SIMPLE% del %OUTPUT_FILE_SIMPLE%
if exist %OUTPUT_FILE_SPECIAL% del %OUTPUT_FILE_SPECIAL%
if exist %OUTPUT_FILE_SPECIAL_PLUS% del %OUTPUT_FILE_SPECIAL_PLUS%
REM Add header to the special file
echo ^> [!info]- Icons > %OUTPUT_FILE_SPECIAL%
echo ^> [!info]- Icons > %OUTPUT_FILE_SPECIAL_PLUS%
REM Loop through all SVG files in the current directory
for %%f in (*.svg) do (
echo %%f >> %OUTPUT_FILE_SIMPLE%
REM Remove the .svg extension for the special file
set "filename=%%~nf"
echo ^> - !filename! >> %OUTPUT_FILE_SPECIAL%
echo ^> - !filename! >> %OUTPUT_FILE_SPECIAL_PLUS%
)
REM Add additional content to the special plus file
(
echo.
echo ^^^```dataviewjs
echo const icons = dv.current().file.lists.map((l) ^> l.text^);
echo await dv.table(
echo ^^^[^^^"Icon^^^", ^^^"Name^^^"],
echo icons.map((l) ^> ^[^^^"^^^", l^^^]^)
echo ^);
echo dv.container.querySelectorAll("tbody tr").forEach((tr, index) ^> ^{
echo ^^^const td = tr.querySelector("td");
echo ^^^obsidian.setIcon(td, icons[index], 100);
echo ^^^}^);
echo ^^^```
) >> %OUTPUT_FILE_SPECIAL_PLUS%
echo The list of SVG files has been saved in %OUTPUT_FILE_SIMPLE%, %OUTPUT_FILE_SPECIAL%, and %OUTPUT_FILE_SPECIAL_PLUS%.
endlocal
pause
- Save and execute this file.
This will create three files: "liste_fichiers_svg.txt", "liste_fichiers_svg_special.txt", and "icons_obsidian.md".
The files "liste_fichiers_svg.txt" and "liste_fichiers_svg_special.txt" are there in case you need them. We will retrieve the file "icons_obsidian.md" and put it in an Obsidian vault.
Here is what it should look like. You will then be able to see all the available icons directly!
Thank you for reading. I am planning to create a small Obsidian plugin to see the available icons directly and have a way to search for the icons you want with a search bar, etc., but for now, I'll leave it aside! 😄
I'll let you know on my website if I do it! 😃
Thank you for your visit, feel free to contact me for
any information, quote or collaboration proposal. I will
be happy to answer you as soon as possible.
Did you like this article? Feel free to share it!