53 Icon Design Terms You Should Know

Icon designers use a variety of terms that may not be familiar to the day-to-day lingo of most designers. Icon designers use words like "modifiers", "keylines", or "glyphs", which might not be immediately intuitive. If you are working with an icon designer, plan to in the future, or even want to take on designing an icon library yourself, this list should serve as a helpful guide!

• Asset - An icon that has been exported, typically in the SVG or PNG file format.

• Artwork - The visual content within an icon's boundary.

• Artboard - An icon’s boundary, always in the shape of a square. The term “artboard” refers to the tool in Adobe Illustrator. Also known as “frame”

• Base icon - If an icon has a modifier, the base icon refers to the artwork component below the modifier.

• Bevel - A type of corner treatment where the corner has a flat, snub edge. They give an icon a chunky, technical personality.

• Break - A type of offset or gap where a line terminates a short distance before intersecting with a foreground object. The line's end can be either square or rounded.

• Category - A collection of icon concepts with a similar use case or theme.

• Chevron - A unique type of arrow that doesn’t have a stem, often used in drop downs or accordions. Looks similar to the greater than or less than signs < >

• Concept - A visual representation of an idea, which typically matches the icon's name (for example, a loaf of bread icon would be named "bread"). An icon concept can be extended to a range of sizes, resulting in several exported assets (such as bread-16.png and bread-24.svg). Also known as “glyph”

• Corner radius - The rounding size of a corner, typically represented as an integer (e.g. 1px, 2px, 3px). The larger the number, the more rounded the corner.

  • Internal corner radius - The size of the rounding on the inside portion of a corner. Always smaller than the external corner radius.

  • External corner radius - The size of the rounding on the outside portion of a corner. Always larger than the internal corner radius.

• Cut-out - A gap or offset between two distinct objects where the overlapped object us “cut-out” from the top object. This is the most common gap/offset treatment for filled icons.

• Duotone - A style that consists of two colors or values.

• End Cap - The treatment at the end of a line, usually rounded or square / flat. Also known as “cap” or “stroke cap”

• Fill - A style of icon that is “filled”, appearing bold or heavy. The opposite of an “outlined” or “stroke” icon. Can also refer to the fill properties of an enclosed path. Also known as “solid”

• Flat - A lack of visual perspective on an icon.

• Frame - An icon’s boundary, always in the shape of a square. The term “frame” refers to the tool in Figma. Also known as “artboard”

• Gap - A separation between two distinct objects. Also known as “offset”

• Glyph - A visual representation of an icon idea, typically matching the icon's name (for example, a loaf of bread icon would be named "bread"). A glyph can be extended to a range of sizes, resulting in several exported assets (such as bread-16.png and bread-24.svg). Glyphs can also be used to refer to typographic symbols, such as π. Also known as “concept”

• Isometric - A type of 3D perspective that shows the top, left, and right sides of an object.

• Icon - An illustrated image, usually small, that visually represents an idea.

• Icon Set - A series of icons. Sometimes can be a single category, other times can be comprised of multiple categories.

• Keylines - The boundaries for artwork that are a similar shape or dimension, including icons with circle, square, vertical, or horizontal compositions. Keylines help keep icons across a set visually balanced.

• Logo - Often mistaken to be the same as an icon. A logo is the branding image of a company, person, or organization.

• Library - A large series of icons, usually grouped by categories.

• Modifier - The visual component of an icon that is positioned over the base icon, adding a new meaning. The modifier is usually tucked in a corner, allowing the base icon to be as visible as possible.

• Metaphor - A visual that abstractly or literally correlates to an icon concept. Many metaphors can be attempted for a single icon, but in the end only one is chosen.

• Monochrome - A visual style of icon that is a single color. Occasionally, certain monochrome sets will include additional values of that color.

• Offset - A separation between two distinct objects. Also known as “gap”

• Optically aligned - When an icon’s artwork is visually centered in the frame, but may be different than the mathematical center. (E.g. a play button needs to be optically aligned by nudging it slightly so it doesn’t feel weighted to one side)

• Outlined - A style of icon that is defined by lines, appearing light or hollow with lots of negative space. The opposite of a “filled” or “solid” icon. Also known as “stroked” or “lined”

• Overlap - When two objects intersect without a separation, one over the other.

• Padding - Distance of pixels between the artwork and the edge of the icon frame.

• Path - A vector line between two points.

• Perspective - How an icon is visually projected. Can vary from flat (no perspective, i.e. 1 side visible), to orthographic (2 sides visible) to isometric (3 sides visible).

• Pixel - The smallest unit of measurement for icons, directly proportional to the pixels on a digital screen. Often shortened to “px”.

• Pixel-Perfect - The state of maximum contrast and visibility of the icon artwork, resulting in crisp, clean display at the actual resolution.

• Pixel Preview - The view setting that allows the designer to see how pixels will render on a screen (Cmd + Opt + Y). Useful when you are trying to make icons pixel-perfect.

• Pixel Rendering - How a pixel displays when it is at actual resolution on a screen.

• Point - The end or beginning of a vector path. Can be smooth, like a bezier curve, or sharp, like an angle.

• PNG - An image file type that is bitmap/raster, enables transparency, and supports lossless compression keeping images high quality. Stands for Portable Network Graphic, and the most common file type for multi-colored icons.

• Rounded - A style treatment for corners or end caps that automatically “rounds” out the edges, resulting in a soft, friendly tone.

• Sharp - A style treatment for corners or end caps that keeps the edges “sharp”. Corners have no rounding, and end caps are “squared” off, resulting in a professional, formal tone.

• Size - The intended scale that an icon should be displayed, equivalent to the pixel dimensions that the icon was built. (E.g. 16px x 16px, or 36px by 36px). Usually shortened to just one number. (i.e. simply “16” or “36”)

• Solid - A style of icon that is “solid”, appearing bold or heavy with little to no negative space. The opposite of an “outlined” or “stroke” icon. Also known as “filled”

• Squared - A style treatment for end caps, flattening the ends so that they are “squared” off.

• Stroke - The visual properties of a line, including thickness and color.

• Stroke weight - The thickness of a line, almost always an integer. In some rare cases at very small sizes, exactly 1.5 px.

• SVG - A vector file format that allows paths to be scaled without losing quality. Stands for Scalable Vector Graphic, and the most common file format for duotone or monochrome icons.

• Style - Visual characteristics of an icon or series of icons, such as stroke weight, padding, or techniques to give the icons personality.

• Thick/thin - Relative width of the stroke weight. Also known as “heavy” or “light”

• Terminal - The end point of a vector line

• Toggle - The ability to transition between a filled and outlined style.

• Weight - The visual heaviness of an icon. Filled icons will always have a greater weight than outlined icons. Added complexity or detail can also increase an icon’s weight.

I hope that with this list, you’ve learned something new about communicating about icons! If you have comments, questions, or want to talk more about something specific, feel free to send me an email or DM me on Twitter or LinkedIn. I’d be happy to chat!