How to add Icons + Reference
How to add Icons + Reference
| Website Documentation / How To
Icons can be added to the website using either raw SVG code or through an img tag referencing files at a specific path. This documentation demonstrates these methods and includes a reference of the icons available. The icons are part of the Lucide icon toolkit. Note: this is an advanced feature, please connect with a Webteam member if you'd like some help!
Adding icons as inline SVG
Icons can be added as inline SVG code by just adding the SVG code through the WYSIWYG editor (using Unfiltered HTML) or adding the code to template files for content types, views or paragraphs. You can find the code for each icon by inspecting the icons below or visiting the Lucide icon toolkit and using their search tools. Icons will come with the default height and width of 24px, this can be changed with the height="18px" -and- width="18px" properties in the image code. You can replace the size with whatever is needed, but both values should be the same…
Adding icons through <img> tag
All of the icons are stored on the website and can be used using an <img> tag referencing them a specific path — …/themes/custom/tyndale/icons/[icon-name].svg It can also be helpful to add elements to the code such as an empty alt tag alt="" and height and width information width="20" height="20". You can view the most commonly used icon names below — other icon options are available.