Adding SVG Icons – Dakno Support

We now offer the ability to insert icons as SVG instead of as PNG images. This allows you to change the color on the fly as needed. If a color is not set, the default color will be #222222 (a very dark gray).

Collections

As we add more icons, there may be multiple collections, separated by style characteristics.

Current Collections

base - main collection for specialized icons
logos - will include all svg logos
material - has commonly used material icons
fa-regular - has a selection of font awesome icons
fa-solid - has a selection of font awesome icons

Using SVG on websites

Insert an SVG on the page just like you would an external image, ensure you specify the size, the default height and width is 160px x 160px. Width and Height must be set to ensure compatibility with older browsers. Your SVG image URL will be formatted as follows replacing the dakno URL with your own URL:

https://www.dakno.com/icons/base/pencil

<img src="https://www.dakno.com/icons/base/pencil" width="90" height="90" alt="Pencil">

Let's break this apart piece by piece:

https://www.dakno.com is your domain URL, please update it based on the domain you're currently on.

icons - This is static and will never change. This must be all lowercase as it is case sensitive.

base - This is your collection name. This must be all lowercase as it is case sensitive.

pencil - This is your icon's name, see the "List of Available Icons" section for names. This must be all lowercase as it is case sensitive.

The default color of all icons right now is #222. There will be a future update to set it to the main body color. If you would like to change the color you can add it to the end of the URL:

https://www.dakno.com/icons/base/pencil/COLOR

<img src="https://www.dakno.com/icons/base/pencil/COLOR" width="90" height="90" alt="Pencil">

Replace COLOR with either a keyword or a hex value:

main - This is the site's main color.

alt - This is the site's alt color, usually dark, by default this is usually #555, but may be reset depending on the design.

accent - This is the site's alt color (usually light or opposite of the main color, this tends to be white or light gray).

text - This is the site's body font color

link - This is the site's link color

header - This is the site's heading color

000000 - This is your color's hex value. This is case insensitive and must be 3 or 6 characters long in a valid hex code. If not it will show the default color, so if the color is not changing, make sure you didn't include the # or characters other than 0-9 or a-F.

List of Available Icons

logos collection: