Icons are elements that appear very frequently on a page, but each one is very small. Their function is very specific: without taking up text, they let people quickly identify an action, a category, or a state. Precisely because they are small, whether the style is chosen correctly often has a bigger impact than expected.
Line and Filled
Line icons are the most common type, using even strokes to outline a shape. Their advantage is that they can be used on various backgrounds, and their style is easy to keep consistent, so many complete icon resource sets are provided in this form. Filled icons use solid color blocks to represent shapes and carry more visual weight, making them suitable for situations that need emphasis, such as the currently selected navigation item. In actual use, a common approach is to pair the two: use line icons in the normal state, and switch to filled icons when selected or emphasized, creating a clear state contrast.
Monochrome and Two-Tone
Monochrome icons are the simplest and easiest to keep consistent. Two-tone icons add a secondary color on this basis to emphasize a certain part inside the icon. The key point is a clear hierarchy—use the primary color for most of the area, and let the secondary color appear only on details that need attention. Having too many colors actually weakens recognizability.
Flat and Dimensional
The flat style removes shadows and texture and conveys information through shape itself, reading most cleanly in an interface. Dimensional icons use shadows and layers to create an effect close to three-dimensional, looking more lively visually, but they have more details and easily blur together when reduced in size. Which one to choose depends on the final size at which the icon will be presented—the smaller the size, the simpler it should be.
Stylized and Illustrative
Styles such as hand-drawn, graffiti, and emoji-like have strong personalities and are suitable for occasions that need approachability, such as products for individual users, event pages, or content sections. Their problem is weak scalability: the more distinctive the style, the harder it is to extend dozens of icons within the same system while still maintaining consistency. If you use them, it is recommended to use them only in a small number of key positions rather than spreading them across the whole site.
Using Them as a Set Matters More Than Individual Beauty
Icons almost never appear alone; usually several or even dozens are used together. Therefore, stroke thickness, corner radius, visual area, and whitespace ratio should be kept consistent within the same icon set. Many people look at icons one by one when choosing and think each one looks good, but when put together they appear messy—that is exactly where the problem lies. When looking for resources, prioritize icon sets that are already systematic and provide variants for different states.
A Few Easily Overlooked Points
The first is size. No matter how finely designed, if it is unclear when reduced to a very small size, it is useless, so key lines should be thick enough and shapes should be generalized enough. The second is clickability. If an icon functions as a button, the click area should be large enough; do not make only the graphic itself clickable. The third is meaning. The meaning of icons depends on convention, and overly abstract shapes are easy for people to fail to guess, so when necessary, it is better to pair them with text.
The core of icon design is not to pursue some trend, but to make icons accurately recognizable at actual sizes and in actual scenarios, and to ensure they do not clash when placed together with other icons.