Callout Emojis
Use emojis as callout icons, with skin tones!
Note: you can use the Obsidian Style Settings plugin to easily switch between skin tones.
In Obsidian, callouts can be created by giving a type identifier such as [!info] to the first line of a blockquote such as:
> [!info]
> Here's a callout block.See more at https://help.obsidian.md/Editing+and+formatting/Callouts.
Emoji names work just like type identifiers, so you can add, for example, [!gift] to display the gift emoji (🎁) as the icon:
jack-o-lanternchristmas-treefireworkssparklersparklesballoonpartygiftbullseyecrystal-ballpuzzlepalettethreadpicture
monkeydogfoxcattigerhorseunicornpigmousehamsterrabbitpandachickenchickdoveswanowlfrogsnaketurtlefishoctopusbutterflybeetlebeescorpionmicrobebouquetlotusrosesunflowerplantcactustreeherbshamrockcloverfallleaf
grapeswatermelonbananaapplepeachcherriesstrawberryavocadocarrotbroccolimushroompepperpretzelcheesehamburgerfriespizzaeggcookingice-creamdonutcupcakecakecandylollipophot-drinkbottlebeercheersbubble-teaice
jeanshigh-heelscrowncapglassesgemmegaphonebelldrumguitartrumpetpianotelephonebatterylow-batterysearchcandlelightbulbbookbooksbookmarkdollarenvelopepapernotecalendarchartscissorslockedunlockedkeyshieldgearmagnetdnapillband-aidwindowsoapbubbles
warningprohibitedno-entrypeaceinfinityquestionexclamationrecyclecheckcrosscircle-redcircle-orangecircle-yellowcircle-greencircle-bluecircle-purplesquare-redsquare-orangesquare-yellowsquare-greensquare-bluesquare-purple
globe-1globe-2globe-3globecompassbeachdesertclassicalwoodhouseferris-wheelcarstoptrafficanchorplanerocketufohourglassheatsunstarmoonplanetcloudfograinbowfiredroplightning
wavewave-lightwave-medium-lightwave-mediumwave-medium-darkwave-darkhandhand-lighthand-medium-lighthand-mediumhand-medium-darkhand-darkvulcanvulcan-lightvulcan-medium-lightvulcan-mediumvulcan-medium-darkvulcan-darkvv-lightv-medium-lightv-mediumv-medium-darkv-darkfingers-crossedfingers-crossed-lightfingers-crossed-medium-lightfingers-crossed-mediumfingers-crossed-medium-darkfingers-crossed-darkpoint-leftpoint-left-lightpoint-left-medium-lightpoint-left-mediumpoint-left-medium-darkpoint-left-darkpoint-rightpoint-right-lightpoint-right-medium-lightpoint-right-mediumpoint-right-medium-darkpoint-right-darkpoint-downpoint-down-lightpoint-down-medium-lightpoint-down-mediumpoint-down-medium-darkpoint-down-darkpoint-leftpoint-left-lightpoint-left-medium-lightpoint-left-mediumpoint-left-medium-darkpoint-left-darkthumbs-upthumbs-up-lightthumbs-up-medium-lightthumbs-up-mediumthumbs-up-medium-darkthumbs-up-darkthumbs-downthumbs-down-lightthumbs-down-medium-lightthumbs-down-mediumthumbs-down-medium-darkthumbs-down-darkraised-fistraised-fist-lightraised-fist-medium-lightraised-fist-mediumraised-fist-medium-darkraised-fist-darkyouyou-lightyou-medium-lightyou-mediumyou-medium-darkyou-darkclapclap-lightclap-medium-lightclap-mediumclap-medium-darkclap-darkhandshakehandshake-lighthandshake-medium-lighthandshake-mediumhandshake-medium-darkhandshake-darkeyeseyemouthtongue
grin-1grin-2grin-3grin-4laugh-1laugh-2smile-1smile-2meltwinkhalohearts-faceheart-eyesstarstruckkisstongue-outshushthinkblushno-mouthneutraleyerollgrimacelyingrelievedsleepnauseavomithotcolddeadwoozymindblowncelebratesunglassesnerdfrownastonishedfearcryscreamconfusedwearysweattiredangrydevilskull-1skull-2pooclownghostalienrobotcat-grincat-smilecat-laughcat-heart-eyescat-screamcat-crysee-no-evilhear-no-evilspeak-no-evilkiss-markletterheart-arrowheart-sparklesheartsheart-exclamationbroken-heartheart-redheart-orangeheart-yellowheart-greenheart-blueheart-purplehundredcollisionspeechthought
flagicebergfirst-aidlocationbrainbarcodeqrshuttlepyramidsinterviewfiltertrashcommentred-jarblue-jarorange-jaryellow-jargreen-jarpurple-jarhacker-cat
You can add more emojis from OpenMoji by downloading the SVG of the emoji you choose. This repository includes a helpers.mjs file to convert it easily to a CSS variable.
For example, you can get the CSS variable of your SVG:
console.log(
makeEmojiCSSVariable(
'unicorn', makeSVGOneLine('/path/to/unicorn.svg')
)
);And add it to :root in callout-emojis.css.
Then, inside callout-emojis.css, you can add the new variable to be the callout icon:
.callout[data-callout='unicorn'] {
--callout-color: <your-prefered-color-rgb>;
--callout-icon: var(--unicorn);
}Note that the unicorn emoji is already included as an icon!