31

I always see these icons on settings or data tables. Can both icons have the same value or meaning? Is it a trend or standard?

  • Gear icon:

    gear icon

  • Ellipsis:

    ellipsis

0

2 Answers 2

43

Both the icons convey a different meaning; even if they tell a user that there are additional options underneath.

A gear icon is derived from a traditional mechanical sense of gears and cogs defining a operation or a physical constraint. You can find additional details from the following answer: Why is the settings icon either associated with gears or a wrench + screwdriver

So gear icon is used for constraints or settings

While the ellipsis is usually used to denote that there are additional options for a particular element in question. These additional options might not fit on screen and/or don't warrant a place on the main menu. The best example would be usage of ellipse in tool bar menu option in google chrome menu. Check the 'Print...' option. This denotes that there are additional choices for the said action

You can check more details regarding its usage in following answer: What is the significance of the three dots "..." on menus and buttons and how to use them right?

Example, when you see a "Print..." option the ellipsis denote that there are additional option for the action print, like an dialogue box displaying selection of printer, layout, color. You might find advance settings for a printer on this dialogue box under the "Gear" icon where you can select margin, paper size, scale etc

[Updated based on input from @TripeHound]

1
  • 3
    You may want to add that the ellipsis is also used on its own as an item in a menu to show that there are more options than fit on screen (or to access uncommon options that don't warrant a place on the main menu).
    – TripeHound
    May 16, 2017 at 9:19
1

Gear icon is mainly used for settings of the portal. As it illustrates moving parts or something to tweak. As a Mechanic would do with a vehicle. From user to understand your icons, it is always advisable to provide either a tooltip for the icon or text just below it.

While ..., three dots signify that there are more options/content but can not be displayed due to lack of space. Just so you know, these three dots are now being used vertically also to save even more horizontal space.

Your Answer

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

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