DLx Pattern Library

DLx Pattern Library

Source: images.less, line 1

2 Images

Images and other icons used in DLx projects. DLx projects use Feather Icons by default. If an icon is not available with Feather Icons, another medium weight, rounded icon may be used instead. The images below are all non-Feather Icons. Each of the following icons is available in the /img folder, and can be linked to via the DLx CDN at https://digitallinguistics.blob.core.windows.net/img/{filename}. Many SVG icons are also available in different colors. For example, blog.svg is also available as blog.blue.svg. Most icons are black by default. Sometimes you may need to set positive or negative margins on the image to make it the same size as other icons. For icons available in different sizes, the size is indicated by appending the dimensions to the filename, after an underscore, e.g. tunnel_64x64.png. Additional websites for images include: The Noun Project, Icons 8, and Flat Icon.

Source: bibtex/bibtex.less, line 1

2.1 BibTeX

The BibTeX logo, for use when reference BibTeX files

Example

<img src=https://digitallinguistics.blob.core.windows.net/img/bibtex.svg>

Source: css/css.less, line 1

2.2 CSS icon

An icon representing CSS or CSS files. Part of a set of icons for different file types (e.g. JS, HTML).

Example

<img src=https://digitallinguistics.blob.core.windows.net/img/css.svg>

Source: dictionary/dictionary.less, line 1

2.3 dictionary

A brown dictionary icon, with the letter D on the cover.

Example

<img src=https://digitallinguistics.blob.core.windows.net/img/dictionary.svg>

Source: html/html.less, line 1

2.4 HTML icon

An icon representing HTML or HTML files. Part of a set of icons for different file types (e.g. CSS, JS).

Example

<img src=https://digitallinguistics.blob.core.windows.net/img/html.svg>

Source: js/js.less, line 1

2.5 JS icon

An icon representing JavaScript or JavaScript files. Part of a set of icons for different file types (e.g. HTML, CSS).

Example

<img src=https://digitallinguistics.blob.core.windows.net/img/js.svg>

Source: json/json.less, line 1

2.7 JSON icon

An icon representing JSON or JSON files. Part of a set of icons for different file types (e.g. HTML, CSS).

Example

<img src=https://digitallinguistics.blob.core.windows.net/img/json.svg>

Source: language/language.less, line 1

2.8 language

A globe icon inside a speech bubble. This is used to represent the concept of language.

Example

<img src=https://digitallinguistics.blob.core.windows.net/img/language.svg>

Source: latex/latex.less, line 1

2.9 LaTeX

The LaTeX logo, for use when reference LaTeX files

Example

<img src=https://digitallinguistics.blob.core.windows.net/img/latex.svg>

Source: lotus/lotus.less, line 1

2.10 lotus

A stylized line drawing of a lotus flower. Used as the icon for the DLx Lotus app.

Example

<img src=https://digitallinguistics.blob.core.windows.net/img/lotus.svg>

Example

<img src=https://digitallinguistics.blob.core.windows.net/img/octicon.svg>

Source: this-is-a-wug/this-is-a-wug.less, line 1

2.12 This is a wug

An image of a wug with the text "This is a wug" in handwritten letters.

Example

<img class=icon-large src=https://digitallinguistics.blob.core.windows.net/img/this-is-a-wug.svg>

Source: this-is-a-wugbot/this-is-a-wugbot.less, line 1

2.13 This is a wugbot

An image of a robotic wug (wugbot) with the text "This is a wugbot" in handwritten letters.

Example

<img class=icon-large src=https://digitallinguistics.blob.core.windows.net/img/this-is-a-wugbot.svg>

Source: tulip/tulip.less, line 1

2.14 tulip

A stylized line drawing of a tulip flower. Used as the icon for the DLx Tools site.

Example

<img src=https://digitallinguistics.blob.core.windows.net/img/tulip.png>

Source: tunnel/tunnel.less, line 1

2.15 tunnel logo

The DLx tunnel logo, showing a nested set of JSON square brackets and curly brackets. Used as the official logo of DLx.

Example

<img src=https://digitallinguistics.blob.core.windows.net/img/tunnel.svg>

Source: wug/wug.less, line 1

2.16 wug

An image of a blue wug.

Example

<img class=icon-large src=https://digitallinguistics.blob.core.windows.net/img/wug.svg>

Source: wug-wugbot/wug-wugbot.less, line 1

2.17 wug & wugbot

A combination of this-is-a-wug.svg and this-is-a-wugbot.svg. Together, this contrasts the wug and the wugbot (robotic wug) side by side, with the handwritten text, "This is a wug. This is a wugbot."

Example

<img class=icon-large src=https://digitallinguistics.blob.core.windows.net/img/wug-wugbot.svg>

Source: wugbot/wugbot.less, line 1

2.18 wugbot

An image of a gray wugbot (robotic wug).

Example

<img class=icon-large src=https://digitallinguistics.blob.core.windows.net/img/wugbot.svg>