How to add a icon adjacent to text

Resources Community Tutorials
, , ,
#1

Let’s say you have a TextButton and you want to add an icon next to it.
Example in the devforum:

Imgur

In this tutorial i’ll show you how to do it.
Right here i have a basic TextButton in the center of my screen

1.PNG
1.PNG1366×744 63.8 KB

Let’s add a ImageLabel in the TextButton

2
2271×545 20.6 KB

Now Set the following Properties (! is required and nothing is optional):

  • !SizeConstraint: YY (the default XX distorts the image)
  • Size: {0, 32},{0, 32} (set to {1, 0},{1, 0} to cover the whole box)
  • !BackgroundTransparency: 1
  • Image: rbxassetid://9880531433 (it’s a plus icon, you may change it)
  • !AnchorPoint: 1, 0.5 (i’ll explain later why it’s 1, 0.5 and not 0.5, 0.5)
  • !Position: {0.5, 0},{0.5, 0} (centers the image)

After applying the properties you should have this

4
4814×515 375 KB

As you can see it’s not perfect yet.
Now let’s look into the TextButton’s properties

5

TextBounds? What’s that?
TextBounds is the width and the height of the text.
Here is a line with a length 36 pixels (the first number in text bounds)

Imgur

How is that relevant?
Since we want to put the icon on the left side of the text.
We can use the TextBounds to get our desired position for the icon
The Middle of Text - Half the width of the Text = Left side of the Text

Imgur

Therefore we need to put our icon 18 px to the left of the middle of the text

The AnchorPoint is set to 1, 0.5 because if we used 0.5, 0.5 it would give us this at the end

7.PNG
7.PNG1366×744 63.9 KB

The “Last” Step is to set the position of the icon to
{0.5, -18},{0.5, 0}
(The -18 put sour icon 18 px to the left of the middle of the text)

The “Final” Result:

image
image816×516 42.5 KB

But does it look a little too close?
No Problem just change the position to one of the following:

{0.5, -23},{0.5, 0} (5 pixel more left)
{0.5, -28},{0.5, 0} (10 pixel more left)
{0.5, -33},{0.5, 0} (15 pixel more left)

It also works with padding and TextScaled
But make sure to set PaddingLeft to the width of your icon

Pictures

image
image1366×768 210 KB

Download

21 Likes
Show off your UI designs
#2

Very helpful tutorial. I’m sure this would make the UIs in so many games 10x better.

1 Like
#3

Umm this is way to complicated? There are way easier ways to do this - for example the UiListLayout can do this job in 7 clicks

#4

What you said doesn’t account for short Text. The icon would be next to the TextLabel but not the actual text.

I’m sure the op is smart enough to try using UIListLayout before doing all of this hard work

you should probably think a bit more before replying and degrading someone else’s resource

1 Like
#5

As @RuizuKun_Dev said, yes. The UIListLayout instance can get the job done in a technical way. When using instances of different sizes, it may mess up the arrangement. Though the image will be beside the label, it won’t be beside the “actual text” which is the main point of the post. So, your method will mostly get 10-15% of the work done.

Before replying, always think why the OP didn’t choose the easier method. Is it because he doesn’t know? Is it because it’s complicated? Is it because that method won’t get it done?

So, please before telling something to somebody, be 100% sure about your answer and then reply.

#6

But then you were not smart enough to use a root instance like a frame, a Textlabel under this frame with automatic size on x+y + size on 0,0,0,0
Then the icon with the size you want

Put the UiListLayout index type on “Name”

Rename the icon “0_icon”
And the Textlabel “1_icon”

Boom you are done

#7

I am, obviously. I use ULL all the time, since years, to do the same as the OP did.

#8

Your method is correct as well. But, in your method a root is required for this process. Where in his process, he got it done with just the label and the icon.

I’m not trying to be rude or anything, but just saying since the OP showed us the easiest possible solution he had, I’m being as honest as possible. Though, your process is a bit more easier than his, the root instances later on may cause lag on (potato-styled) low-end devices.

#9

Yes it also works, i have also used ListLayout (months ago) do the exact same thing except it triggers me to use an container frame, because it feels unnecessary when i use my tutorial.
If you think about it…

You can see that adding a Frame, TextLabel, ImageLabel and ListLayout while also setting automaticSize and the 3 properties of the ListLayout that needs to be changed (CellPadding, HorizontalAlignement, FillDirection and IndexType) might be a lot steps.

In contrast to your method, mine requires fewer steps…
Add a textLabel and a ImageLabel, set the AnchorPoint of the Image to 1, 0.5 and set the position to {0.5, 0, 0.5, 0} and finally setting The X Offset of the Position to -(padding+(textBounds))

It might seems “overcomplicated” but the only the hard thing here is the math really.
I now use UI Frameworks (Eon releasing soon), it’s better and easier to do this method in UI Frameworks. You can even achieve the AutomaticSizing Behaviour using TextService:GetBoundsAsync

Lastly, what if you want to add something else (as an example to the right side of Frame)? The Frame has ListLayout and the behaviour applies to all the children of Frame, You can’t insert it on the TextLabel because it doesn’t covers the whole frame and if it did the icon would be off.

I am not forcing you to use my method or anything, do whatever you want, it’s your choice.

1 Like
#10

Hey, this guide is really useful, thanks! I was wondering if there is any way to get this to work with all screen sizes without scripting?

1 Like
#11

Offset based button

If your button is offset based (meaning the size is defined using pixel and not a fraction of the viewport size)
It will always stay the same.

Scale based button

However, if the button is relative to the size of the device then follow theses steps:

Download this plugin

After downloading you should have 3 button on the plugin tab.
Select your button on the explorer then click “Unit Conversion”
and scale size.

Close the widget and click “Add Constraint”,
Select your icon on the explorer then click “Unit Conversion”
and scale position.

1 Like