Imagine a table with many rows in a web application. The first column contains only an icon, no text. When single-clicking the icon, it must represent selecting that row and takes you to a new page. What icon would you choose?

Update: In this particular case, it is selecting a program. Not a software program, but a government program (i.e. the government is running a program to give money away). I was hoping for a context-free icon, and may settle on a hand icon enter image description here but a context-sensitive icon representing a program would also work.

  • 1
    Really, this depends on what selecting the row and going to the new page actually means. If it's a table of products to buy and the next page is checkout, then it'll be something shopping cart related. If it's a table of choices in a multi-step process and the next page is just the next step, something like a right-pointing arrow. If it's a menu in a food venue and the next page is confirming your order, then something like a knife and fork icon. Etc etc etc. Aug 7, 2013 at 11:40

4 Answers 4


It selects and goes to a new page? Without any other context, it sounds like a weird experience.

A check box would probably do the job.

Again without context, a more logical presentation might be to move the select column to the right and use a right arrow in some form. That would indicate that you will direct them to a sub-page for that row.

  • 2
    Which is why I think it's a weird experience. I don't think any "select" icon is going to convey "select this item then immediately leave the page". Aug 6, 2013 at 20:50
  • agreed with the comment above. Don't use a check box as a button! Aug 7, 2013 at 9:06

The common UI widget for selecting one item from a list is a radio button.

( ) Item 1
( ) Item 2
( ) Item 3

Of course, rarely does selecting a radio button send you to another page, but it's certainly do-able.

An alternative solution would be to simply make them links:

    Item 1
    Item 2
    Item 3

And yet another solution would be to adopt an interaction that is becoming common on mobile devices which is a 'select list' or 'Miller Columns'

Item 1                                              >
Item 2                                              >
Item 3                                              >

I prefer the latter for two reasons:

  1. Affordance: it 'feels' clickable and indicates that I'm going to see something else after choosing it.
  2. It's responsive: since it's already borrowing a mobile UI standard, it's already mobile-ready!

The drawback is that it may not work for a table of data. It can be done, but it may not be ideal if there is a lot of additional data.


I totally missed the specific of your question: You want to have an icon. That's a tougher question. I'm not sure I'd recommend an icon for this. Instead, I'd make sure the entire row is selectable, and you indicate that in a particular way, probably via one of the methods outlined above.

But if it must be an icon, I'd suggest moving the icon to the right, and use an arrow--perhaps on hover (or show by default grayed out and highlight on hover). The arrow says "select this and continue..." similar to the select list shown above.


I'd probably use a combination of:

Changing/inverting the entire rows colour when you hover over it - to indicate that you can interact with it


Changing the cursor to the Pointer CSS property when you hover over the button - a very obvious indicator that something can be clicked on.

In your particular case I'd use text rather than an icon, as it's not something you can easily represent in an icon. I'd use something like more, or edit in the basic html link styling like so:

Row 1 . Column . Column . Column More/EditPointer Cursor

Row 2 . Column . Column . Column More/Edit

Row 3 . Column . Column . Column More/Edit

I'd also put the controls after the content, because we read left-to-right, so the user has to read at least some of the row before deciding that it is what they want.

  • Excellent idea on changing the cursor. In fact, the icon is a link, so the cursor automatically changes, and the alt text will show if you hover over for long enough. Those are my requirements so I don't have flexibility here. Only to choose the icon. Aug 7, 2013 at 17:50

If it is going to a new page, then I would probably choose an icon that symbolizes the new page, if the new page is sort of a form, I would choose an icon that would represent a form.

  • Context-sensitive icon is a good idea. In my case, it's selecting a program, as in a government program that dishes out $$$. Aug 7, 2013 at 17:51
  • ( $.$) .... in that case, I probably would use either a B&W piggy bank icon (sort of a vector icon) or glistening yellow coins, but then that's just me
    – user14316
    Aug 8, 2013 at 4:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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