Settings icon

When to use it

The gear is the universal front door to configuration — use it for app- or page-level preferences, not for one-off actions. If your product has both account settings and content-level controls, keep the gear for the former and use a sliders icon for the latter; mixing them is the most common settings-icon mistake. Note Heroicons and Phosphor draw it with visibly fewer teeth than Tabler.

Reach for the gear as the single, expected entry point to configuration — the corner of an app, the end of a nav, the top of a preferences screen. It reads as 'the system's settings', which is why it should not do double duty for content-level tuning or one-off actions. When you have both system settings and user-facing value adjustments, keep the gear for configuration and hand the adjustable controls to sliders, so the two tiers stay legible.

• Reaching for Sliders? Reach for the faders when the user tunes their own preferences or values rather than opening system configuration.
• Reaching for Wrench? Reach for the wrench for repair, maintenance, or advanced intervention beyond everyday settings.