Sprite sheet like drawing using UI image

To reduce overall images included in a project, I am trying to consolidate multiple sprites into a single image much like a sprite sheet. I currently have a scaled down candy crush type game with 3 shapes. How would I have all 3 shapes in a single 300x100 image file but only draw the 100x100 box around the shape I need? I need to be able to draw the 100x100 cropped shape in a specific pixel location on the screen and have the image only take a 100x100 space since other shapes are drawn next to it. So far I have tried using the GUI begingroup method but haven't had luck with the placements of my variables. I have my math for defining the left and right edges of the crop and where to place the top left corner of the new image already and just need to know how to use this with GUI or even Graphics.
Here is what the file for my combined images looks like.
And this is what I have drawing using separate images (the overall goal)

 

You don't need to do this in code.

In the inspector, pull up shapes.png. Change the Sprite Mode from Single to Multiple and hit Apply. Then, click the Sprite Editor button, which will allow you to cut this texture up into sprites. You can either click-drag on the space and manually position the square to how you want your sprites divided, or you can click on Slice in the upper-left, then hit the Slice button and it will automatically attempt to divide your image into sprites. You can then adjust the borders of the automatic sprites as needed.

The sprites will be added as subobject to shapes.png, which can then be referenced wherever you need them.

(Incidentally, this process can be done in code, but especially for something this trivial, it's usually not really worth the effort.)

 

Ideally do what ketura suggests. But if you're using OnGUI like your question suggests you can use GUI.DrawTextureWithTexCoords, and calculate the uvs yourself.