This page is part of a static HTML representation of the TiddlyWiki at

Core Icons

 23rd April 2023 at 10:31am


TiddlyWiki includes over 100 custom vector icons. They feature in the user interface and are also available for authors to use in their own applications. See Icon Gallery for a complete listing.


The core icons are used by transcluding them. For example:


That renders as:

The core icons are parameterised. The first parameter size specified the size at which the icon should be rendered:

<$transclude $tiddler="$:/core/images/picture" size="32px"/>

That renders as:

Here is an example of dynamically resizing icons:

<$list filter="[range[24,56,8]]" variable=iconSize>
<$text text={{{ [<iconSize>addsuffix[px]] }}} />
<$transclude $tiddler="$:/core/icon" size=<<iconSize>>/>

That renders as:

24px 32px 40px 48px 56px

Some icons take further parameters to customise how they are rendered. For example, the $:/core/images/new-journal-button icon takes an additional parameter day that specifies the day of the month that should be shown on the calendar. It defaults to the current date if not specified

<$transclude $tiddler="$:/core/images/new-journal-button" day="17"/>

That renders as:



The core icons are implemented as embedded SVG elements, and not as full-blown SVG images. This means that they can be styled using CSS. For example, the CSS property fill can be used to change the colour of the icons. For example:

<span style="fill: red;">{{$:/core/images/opacity}}</span>

That renders as: