> For the complete documentation index, see [llms.txt](https://normal-tangerine8609.gitbook.io/html-widget/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://normal-tangerine8609.gitbook.io/html-widget/add-ons/less-than-symbol-greater-than.md).

# \<symbol>

About The Symbol Tag

```html
<widget>
  <symbol>bolt</symbol>
</widget>
```

The `<symbol>` element defines a SF symbol that becomes a widget image element.

### **File**

[html-widget-symbol.js](https://github.com/Normal-Tangerine8609/Scriptable-HTML-Widget/blob/main/add-ons/html-widget-symbol.js)

### **Inner Text**

The `<symbol>` element can have any character as the inner text excluding `<` and `>` and trimming white space. `<` must be converted to the `&lt;` entity. `>` must be converted to the `&gt;` entity. `&` can optionally be converted to the `&amp;` entity. The inner text should be a SF Symbol name, like `bolt`.

### **Attributes**

**borderColor - colour**

Defines the border color.

**borderWidth - posInt**

Defines the border width.

**cornerRadius - posInt**

Defines the corner radius.

**imageOpacity - decimal**

Defines the opacity of the symbol.

**imageSize - size**

Defines the size of the symbol.

**tintColor - colour**

Defines the tint color.

**url - url**

Defines the symbol URL.

**contentMode - contentMode**

Defines the content mode of the symbol (`filling` or `fitting`).

**alignImage - alignImage**

Defines the horizontal alignment of the symbol.

**resizable - bool**

On `true`, it does not allow the symbol to be resizable.