From a Web Performance perspective, I would probably suggest simply using the Unicode symbols for these:
rendered | keyword | HTML entity |
---|---|---|
ⓘ | note |
ⓘ |
⚠︎ | warning |
⚠︎ 1 |
ⓧ | danger / error |
ⓧ |
ⓘ Note For those interested, this idea was heavily inspired by the symbol legend found in
@openinf/util-text
, originally intended for implementing JavaScript console loggers in terminal emulators. The Unicode code points for these symbols (found in an enum in the source) are what the HTML entities are derived from.
Footnotes
-
The symbol for the Warning callout is actually composed of two HTML entities. The
︎
HTML entity, which follows the HTML entity for the warning symbol (⚠
), forces the previous character to be rendered as text (e.g., ⚠︎) rather than as an Emoji Symbol (⚠️ ), which would be unsuitable due to inconsistencies across devices. ↩