I've below pagination select input for choosing the number of records to be shown per page.

enter image description here

I'm looking for an alternative icon that represents the text Items per page So that instead of showing text I can use the icon before select input.

I know that there isn't such accurate icon which is used for indicating Items per page but I would be fine even if the icon indicates some idea that the input is for choosing the page size.

I would be glad to know the suggestions.

  • Hi VVK, and welcome to StackExchange! Before you replace the text with an icon, consider this: any icon that is not well-established will require your users to learn its meaning. In contrast, the text label is unambiguous and instantly tells your users what the popup menu is for. So, may I humbly ask why you want to use an icon instead of text here? Maybe there's another solution entirely. – JochenW May 27 at 1:51
  • @JochenW I Agree, the reason I want to show icon is only to save the space since on the mobile devices there is very less width available, also aligning the text to top/bottom looks ugly – VVK May 27 at 4:55

I understand that you are trying to reduce the number of text in the page, which is a good thought, however as a best practice try to use the standard UX pattern which is well known and proved to work well. Also, users may interpresent an icon differently according to their content and culture, so it is difficult to design a good icon. I assume the 'items per page' is used in your context for data tables. So here I am submitting my idea for icon.

Disclaimer - icon is not tested for your context, you need to test it with the users.

Note - Always provide Alt text description for an icon, so that it will adhere accessibility norms.

If used in a table

If it is used for a table

If it is for document page

enter image description here

| improve this answer | |
  • 2
    +1 a very sound answer to the question, especially since the usage of icons for this purpose does seem to cause some issues. I think this is even more problematic when you consider that the numbers will be very hard to see if incorporated into an icon (e.g. for mobile view). – Michael Lai May 25 at 22:26
  • @Rupesh Thanks, I like the first icon without the number. Could you please point me to the svg link so that I can check how it looks in my webapp. – VVK May 26 at 4:57
  • Hi VVK, this is ideated instantly as I know there is no such icon exists for per page view. So created a new for your use. You can create one png and convert it to SVG. The closed to this icon is list icon, first you try this icon, if this suits to your context then create one. iconfinder.com/search/?q=list&price=free – Rupesh Nath May 26 at 17:54

Does it have to be a dropdown?

If the range is not a huge one would it be okay to use a slider to select the items. It would be much better to see the whole context and see where it's been used. If it's located within a small dropdown ofc slider is a terrible choice. If it's on mobile that's much worse lol.

But if you really need to use icons, I would have used something like this.

Items per page icon?

But there's the other problem with this icon. It's not that it's not explanatory at all. It could be grid view or a IKEA shelf lol.

The thing about functional icons, they're mostly used for simple functions. Like cut, copy, paste, delete, move, pen, rectangle etc. And they need to be recognized immediately when they've seen in a glance. That's why we still use diskette's for save functions (it's been thought back then and that terminology is engraved with that icon)

'Items per row' is not that simple function at all. Maybe it's not a right all to use icon for this action?

| improve this answer | |
  • 2
    +1 It's good to be able to challenge the proposed solution, and you have pointed out some solid reasons for this :) – Michael Lai May 25 at 22:27
  • @Korhan Thanks, I like your icon proposal, could you point me to the svg link so that I can test it in my web-app. – VVK May 26 at 4:55
  • @VVK It was more like a demonstrative sketch instead of a proposal. I've doodled it on figma without even checking on it's size or alignment and screencaptured it. – Korhan May 26 at 8:27
  • @Korhan - no hard feeling here. I saw this icon as a page loader gif image in Dell.com. You can check their website and browse through few pages / menus. – Rupesh Nath May 27 at 17:56

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