I always wondered how people integrated images and text in their UI, which can be seen in many tutorials. The way I did before was writing the text and dragging the image near it to make it look like it was integrated along with it. The problem with it was that the anchor for text and image didn't always fit properly, making images appear at different locations compared to text on different resolution screens.
And then, I came across TextMeshPro, a really cool text for unity that supports multiple features unsupported by the default text system from Unity.
Step 1: Find Your Image
You need to have an image that you want to integrate with text. I made simple Xbox button icons to show you how it is done.
Step 2: Import Image Settings
Convert your imported image sprite mode to multiple. Note that this texture must have multiple sprites that can be sliced so that we can use a single atlas to show different images.

Step 3: Slice the Images
Slice the Images by opening the sprite editor.

Step 4: Create the Sprite Asset
You need to create a sprite asset for TextMeshPro use. To do that, you need to first select the image you want to create a sprite asset from.
An image showing how you can do that is shown below:

Step 5: Add TextMeshPro to the Canvas
Now create TextMeshPro text in canvas. Expand the extra settings. There you will find a location to put newly created sprite assets.

Step 6: Using Text With Images
After setting these up, we can simply write any text we want, and when we want to add an image, we simply use the index of sprite in our sprite atlas. All the images sliced are indexed while creating the sprite asset. A simple example of how we can use an image is:
Press <size=60> <sprite=0> </size> to jump //
Here, 0 is the index of the sprite. To increase the image size, I am using a size tag.
I have used all the sprite indices to show different images in the example below.

Using these steps, you will be able to integrate images easily using TextMeshpro.
In the example above, I use different tags like size and sprite, which are rich text supported. To learn more about all the different tags supported, please refer to TextMeshPro's official documentation.
That's it I hope you learned something new. Please leave any comments you have about this article.