How many settings fine tuning icons are there?

15 unique icons, each in 6 styles, for 90 definitions in the settings-fine-tuning entry point.

Are the Settings Fine Tuning icons free to use?

Yes. @rchernando/solar-icons is published on npm under an open licence and the settings-fine-tuning set is included in the package.

Can I import only one settings fine tuning icon?

Yes — import the single export you need from "@rchernando/solar-icons/settings-fine-tuning". Anything you do not import is tree-shaken away.

Settings Fine Tuning Icons for Angular

Name: Solar Icons for Angular
Author: rchernando

15 icons · 6 styles each · @rchernando/solar-icons/settings-fine-tuning

Solar Icons groups 15 glyphs under Settings Fine Tuning — 1.2% of the 1,246 icons in the library, which makes it the 31st largest of the 37 categories. Every glyph is drawn on a 24x24 grid and exported in 6 style variants, so the set accounts for roughly 90 icon definitions on its own.

These are icons for gears, sliders and configuration. You will normally place them in settings pages, preference panels, filter drawers and admin toggles, and they are the first set every application with a configuration screen tends to pull in. Icons such as Settings, Settings Minimalistic, Tuning and Tuning Square cover the obvious cases; further in you will find Settings, Tuning, Tuning Square2 and Tuning3, which handle the states people forget to design for.

All 15 Settings Fine Tuning icons

settings

settings-minimalistic

Style variants in the Settings Fine Tuning set

Each of the 15 icons ships as 6 separate exports: Bold, Bold Duotone, Linear, Outline, Broken and Line Duotone. Linear is the safe default for settings fine tuning in a dense layout; Bold reads better at small sizes and on coloured surfaces; the duotone pair adds a second opacity layer when you want depth without introducing another colour token.

bold

bold-duotone

linear

outline

broken

line-duotone

Installing the Settings Fine Tuning icons

Import from the "@rchernando/solar-icons/settings-fine-tuning" entry point rather than the package root — that is what keeps the other 36 categories out of your bundle. Register the icons you need with provideSolarIcons, either once in the application config or inside the providers array of the route that uses them, and render <solar-icon> with the icon name. The SVG is inlined, so there is no runtime fetch and no flash of missing icon.

bash

npm i @rchernando/solar-icons

typescript

import { SettingsBold, SettingsMinimalisticBold, TuningBold } from '@rchernando/solar-icons/settings-fine-tuning';

html

<solar-icon name="settings" iconStyle="bold" size="24px" />
<solar-icon name="settings-minimalistic" iconStyle="bold" size="24px" />
<solar-icon name="tuning" iconStyle="bold" size="24px" />

Settings Fine Tuning icons FAQ

How many settings fine tuning icons are there?: 15 unique icons, each in 6 styles, for 90 definitions in the settings-fine-tuning entry point.
Are the Settings Fine Tuning icons free to use?: Yes. @rchernando/solar-icons is published on npm under an open licence and the settings-fine-tuning set is included in the package.
Can I import only one settings fine tuning icon?: Yes — import the single export you need from "@rchernando/solar-icons/settings-fine-tuning". Anything you do not import is tree-shaken away.

Other icon categories

Sets that are commonly used next to Settings Fine Tuning: Shopping Ecommerce (27), Sports (41), Security (46) and Search (12).

37 categories, 1,246 icons. Search the whole library or read the usage patterns.