I have a button on my web page, this button once clicked will open a new tab and take the user there.

I'm just wondering is there any convention on what icon I should use for this button? At the moment it's a 'url' icon.

Current icon of chain links


But since I'm opening a new tab, should I use somthing different?

The website is a professional / business site.

  • Are you planning to open a new tab to something within the same site, or external to your site? – asfallows May 21 '14 at 12:51
  • Ah, well the link is configurable from the users end. So the destination is up to them! – Daft May 21 '14 at 12:55

For links which leave your webpage, I'm fond of this icon: http://fortawesome.github.io/Font-Awesome/3.2.1/icon/external-link/

The shape depicts a box (which could represent either the current window/tab, or the current site) with an arrow leaving its boundaries.

A prime example of this in use is Wikipedia, which uses a similar icon for reference links at the bottom of articles (see this example which I pulled from the Random Article tool).

Per your comment, if the links are configurable, I'm going to guess that often the link will be external, so the icon I discuss above may work well for you.

Another approach to consider is simply using the URL of the <a> tag as its label. For example, if you're making a user profile page, instead of showing:

My Website

Let users enter their website but show it as:

Website: http://www.mywebsite.com/path/to/action

|improve this answer|||||
  • I actually found that icon myself not long after I posted this question. Looks perfect. Thanks for the suggestion all the same! – Daft May 23 '14 at 16:13

That icon is normally used for adding a link when editing something.

Most browsers have shortcut keys which allow the user to choose to open a link in a new tab. I can't think of a site that indicates to the user that they are opening a tab, they just do it. Gmail, Facebook, etc. all do this when you click something that takes you off their site, and it's up to you to notice that there is an extra tab.

I would say that you probably don't need to worry about showing it as an option, either force it to always happen, or let the user choose via the browser itself.

|improve this answer|||||

Firstly, there's no command to open a new tab - it simply opens a new window and your browser will put that in a tab (so if the user has an old browser, a new window will be opened). I wouldn't worry about making a special icon since there are no standards for this (e.g. the icon will probably be more confused if you try to start a new standard).

If you are concerned, add a small text nearby the link that says that clicking the link will open the site in new window.

|improve this answer|||||

Not that I'm aware of. Most browsers (Firefox, Safari, Internet Explorer) seem to use a plus icon (+) to indicate the creation of a new tab.

However, a (+) next to your links is awkward and confusing. A common convention is to use an icon that is focused on the action: leaving. Icons like this one from Font Awesome are a good place to start:

enter image description here

Or you can always stick with the HTML character: (→).

|improve this answer|||||

Not the answer you're looking for? Browse other questions tagged or ask your own question.