The Iconography Encyclopedia

A comprehensive field guide for the intrepid icon designer.

Abstract: Abstract symbols are non-literal forms made up of shapes, lines, or patterns to represent something more meaningful.
Accessibility: Designing inclusive experiences that people can use regardless of their physical, sensory, or cognitive abilities.
Alignment: Positioning and arrangement of elements relative to the frame or each other.
Anatomy: Named parts of an icon’s construction, such as base, modifier, stroke, or end cap.
Anchor point: A control point on a vector path that defines and adjusts the path’s shape.
Angle: The tilt applied to a line, plane, or shape within an icon to suggest direction or motion. Can also refer to the space or shape formed when two lines or surfaces meet at a point, measured in degrees.
Apex: The topmost point of an icon where two strokes or edges meet, such as at the tip of a triangle or an arrow.
App icon: An app icon consists of the glyph and its container which represent a mobile, tablet, or desktop application. These are most often seen on a desktop, home screen, or in an app store.
Audit: An inventory and evaluation of a product, website, or brand’s components, including icons, against quality standards.
Balance: The distribution of visual weight within an icon or across an icon set.
Base: The primary icon in a compound icon that carries its core meaning. Modifiers are layered on top of base icons to define additional meaning.
Base size: The default dimension at which an icon is built, before optionally being scaled or redrawn at additional sizes.
Boolean operations: The vector editing operations — union, subtract, intersect, exclude — that combine or divide overlapping shapes into a new, unified shape. Union merges two or more shapes into a combined shape. Subtract removes the area of one or more shapes from a target shape. Intersect creates a new shape consisting only of the area where two or more shapes overlap. Exclude, the opposite of intersect, keeps only the areas of shapes that do not overlap, discarding the overlapping region.
Bounding box: A virtual rectangle containing the selected object. Only shown when one or more objects are selected.
Brevity: Using the minimum visual detail necessary for an icon to communicate the idea.
Bézier curve: Bézier curves are smooth, curved lines used to draw vector paths using anchor points and handles.
Clarity: An icon’s ability to communicate its intended meaning or idea quickly and unambiguously.
Coherence: Coherence is a logical connection between ideas that makes people go “yeah, that makes sense” when they see the icons together.
Component: A reusable design element whose linked copies, called instances, stay in sync with the original.
Compound icon: A compound icon is a glyph built by layering a base icon with one or more modifiers, used to communicate a more specific or combined meaning.
Concentric: The property of nested shapes which share the same center point, requiring proportionally adjusted corner radii.
Consistency: The principle of applying the same stylistic rules across every icon in a set. This includes the end caps, stroke weight, personality, key lines, etc.
Contiguous strokes: Unbroken, continuous strokes within an icon’s construction.
Contrast: The intentional use of opposing visual elements to improve accessibility and readability.
Corner radius: The degree of rounding applied to a path’s corner points.
Corner smoothing: A gradually easing corner curve that blends a straight edge into a curve more smoothly than a circular arc. Also referred to as a superellipse.
Dashed stroke: A line made up of smaller segments with gaps in between. End caps can be applied to these smaller segments for a variety of appearances.
Custom: Custom icons are designed specifically for a brand, product, or institution, taking into account its visual identity, subject matter, and unique technical or practical requirements. This can include drawing glyphs that don’t exist in a pre-made library, defining the right metaphor for a particular feature, and giving familiar symbols personality that creates belonging alongside typography and illustration.; Commissioning an icon set allows these decisions to be made together, rather than piecing together icons from different sources and adjusting them to visually match each other. When you work with an icon designer, you get icon systems, not icon sets.
Deprecation: The official retirement of a specific component, pattern, or feature.
Design system: A design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent.
Emphasis: The principle of drawing attention to a specific element in an icon, or to an icon in an experience.
Emoji: Illustrative glyphs in a typeface that represent objects, concepts, and feelings. They’re typically used to decorate, react to, or even replace text.
End cap: The finish applied to the open end of a stroke, such as square or round.
Export: The process of converting an icon’s artwork into a distributable file format, such as SVG or PNG, for use outside the design application.
Favicon: A small graphic representing a website, displayed in a browser’s tab, bookmarks bar, or history list. Often a company logo, product app icon, or simple symbol.
Fill: A solid color applied within a shape’s boundary, as opposed to an outline.
Flat: A two-dimensional style with minimal perspective or depth cues.
Font: A font is an independent file containing a typeface in one or more styles. In static fonts, one file corresponds to one style. In variable fonts, a single file can include multiple styles.
Format: The file type an icon is exported as, such as SVG or PNG.
Gap: Deliberate negative space used to create a visual break between design elements.
Frame: The digital working area and export boundary that sets an icon’s dimensions, such as 24 × 24 px; also called a canvas or artboard.
Geometric: A style built from precise geometric shapes, such as circles, squares, and polygons.
GIF: Graphics Interchange Format — a raster image format with a limited color palette that supports simple frame-based animation.
Glyph: Glyphs are the visual expressions of symbols.
Gradient: A smooth, gradual transition between two or more colors. The main types of gradient are linear, radial, angular, and diamond.
Grid: A structural system of aligned rows and columns used to size, space, and position design elements consistently and precisely.
Handle: Handles are directional control points attached to anchor points and used to shape a path segment’s curvature.
Height: Height refers to vertical measurements of design elements, glyphs, or icons.
Hex code: A six-digit alphanumeric code used to specify exact digital colors.
Hue: The pure, base color family of a particular color such as red, yellow, or blue.
Icon: Icons are simple illustrative glyphs representing functions, objects, or directions. They rarely incorporate words.
Icon design: The craft of drawing individual icons.
Icon set: A collection of icons designed and maintained together as a single, coherent family.
Icon system: The active application and documentation of an icon set.
Iconography: The output of icon design, including the icons and the guidance or principles of an icon system.
Instance: A linked duplicate of a component that updates automatically when the original component changes. Native to Figma.
Interpolation: The generation of an intermediate style by mathematically blending between two compatible drawn masters.
Join: The anchor point where two strokes meet to create a corner. There are three types of join. Miter joins are sharp and pointed. Round joins are smooth and curved. Beveled joins have a flat, angled edge that appears clipped.
Key line: Standardized guide shapes (e.g., circles, squares, rectangles) used to keep icon proportions consistent and balanced.
Layout: The arrangement of elements within an icon, or of design elements as part of a larger design.
Legibility: How easily the details of an icon can be visually distinguished and understood.
Localization: The process of adapting words, visuals, and more to achieve cultural and geographic fit for a specific audience.
Mask: A mask, or clipping mask, is a technique in which one shape crops or reveals a portion of another element or group of elements.
Metadata: Information attached to an icon file, such as its name, category, description, and search keywords.
Metaphor: Metaphors use familiar visual symbols to communicate more complex abstract ideas, thoughts, or concepts. For instance, a gear representing “settings.”
Modifier: A smaller icon or shape layered onto or near the base icon to convey additional information or a specific state. Also sometimes called an adornment or a badge.
Naming convention: A naming convention is a systematic pattern used to name files and components consistently, such as “ic_arrow_left_24” or “arrow-left-small”. Order names from general to specific.
Navigation: The act of moving between screens of an app to complete tasks. Icons are a key part of navigation components, acting as virtual signposts.
Optical corrections: Small manual adjustments made to a shape so it appears balanced to the eye, rather than by using strict measurements.
Organic: A style based on natural or nature-inspired forms.
Outline: A style of icons drawn as unfilled linear strokes rather than solid shapes.
Overlap: The intersection of two or more shapes.
Overshoot: The slight extension of a shape beyond the key lines or simply into the padding. This extension is necessary to create visual harmony and balance.
Padding: Think of padding as internal margins. Padding is typically established as part of the process of designing key lines.
Path: Paths define all vector shapes. A path is one continuous trajectory of lines and/or curves, called segments. Segments, whether straight or curved, are defined by two anchor points. Paths can be open or closed.
Personality: The distinct visual character of an icon system.
Perspective: The use of depth cues, such as angled planes, to give an icon a three-dimensional appearance or to convey depth conceptually.
Pictogram: Historically, pictograms are formal, standardized nonverbal ways to communicate important information. Symbolism is often predetermined or forgone entirely. In modern use, pictograms can also be micro-illustrations that convey a singular object or abstract representation.
Pixel: The smallest building block of a screen display.
Pixel grid: The two-dimensional structure that guides icon designers in their creation process to ensure icons render crisply.
Pixel snapping: The automatic alignment feature, found in design software, forces anchor points and paths to land on specific pixels, as opposed to sub-pixels.
PNG: PNG, short for Portable Network Graphics, is a raster image format that supports transparency and lossless compression.
Point: Points are the standard measurement units to describe the size of a typeface. Sometimes shortened to “pt”.
Product icon: Product icons are used in UX and UI to indicate actions, navigation, or decoration. The majority of the examples in this guide are product icons.
Readability: Readability is the ease with which an icon can be visually parsed in context, particularly at small sizes. Not to be confused with legibility.
Recognizability: How quickly and accurately a viewer can recognize what an icon both symbolizes and represents.
Rotation: The act or result of changing the direction of a design element, or of the icon itself.
Saturation: The purity, intensity, or vividness of a color.
Scale: Scale refers to the size of the icon relative to the base size. It means to increase or decrease the size of the icon, the glyph, or icon elements.
Serif: Serifs are small elements at the tips of strokes in serif typefaces. Sans serif typefaces do not have serifs.
Shape: A two-dimensional visual element made up of a closed path.
Silhouette: The outer contour of an icon. If you look at an icon and squint, you will see the silhouette. Strong silhouettes are key in icon design for legibility at smaller sizes.
Slash: The diagonal modifier overlaid onto a base icon which indicates that a feature is disabled, turned off, or unavailable.
Spot illustration: A larger, decorative illustration that communicates a short narrative or emotional tone.
Squircle: A geometric shape that falls midway between a square and a circle.
State: States are functional conditions, demonstrated visually. An icon may have additional states to indicate its interactive status, such as active, inactive, disabled, or focused.
Stroke: The commonly used technical term for the visible lines which make up paths, with a defined weight.
Stroke alignment: Stroke alignment describes where a stroke is drawn relative to a path’s edge. Centered strokes sit directly on the path. Inside strokes are entirely inside the path. Outside strokes are entirely outside the path.
Stroke weight: The thickness of a stroke, measured in pixels. Common stroke weights for product iconography are 1 px, 1.25 px, 1.5 px, and 2 px. Also referred to as line weight.
Stroke width profile: Width profiles let you convert uniform strokes into lines with varying thicknesses, simulating natural pressure variations found in brush strokes.
Style: The overall visual treatment of an icon set, including its personality and treatments such as outline, filled, flat, or duotone.
Style guide: The written documentation of technical rules and guidelines governing an icon system, including information for usage as well as for building new icons.
SVG: An SVG, or Scalable Vector Graphics, is an editable, code-based vector image file format commonly used for icons in digital products.
Symbol: Symbols are metaphorical or abstract graphics used to signal or represent ideas. For example, “rabbit” means “fast,” and “tortoise” means “slow.”
Symmetry: An arrangement of elements, or an entire icon, that appears unchanged when reflected across a horizontal or vertical axis.
Thick: Refers to either icons or individual strokes that appear heavier, denser, or more prominent.
Thin: Refers to either icons or individual strokes that appear finer, more lightweight, or subtler.
User Interface: The visual elements and controls through which people interact with software, devices, or machines; abbreviated to UI.
User Experience: User experience, or UX, describes how a product works and feels to the people using it.
Vector: A shape or line defined mathematically by points and curves rather than by pixels, making it fully scalable.
Vector network: A Figma-specific path structure that allows lines to branch in multiple directions without a fixed loop or direction, unlike traditional vector paths.
Versioning: The practice of maintaining and communicating a clear history of past iterations of a design.
Visual weight: The perceived heaviness of a shape based on its stroke weight, fill, and size. Some icons, like chevron or ellipsis icons, are naturally visually lighter, and should never be expected to maintain the same visual weight as their naturally heavier counterparts. Sometimes called optical weight.
Wayfinding: A system of elements working together to provide clarity and assistance to people in a built environment. Some elements include signage, icons, lighting, layout, and architecture.
Weight: The weight of an icon refers to its visual density. This can show up in the thickness of its strokes, the amount of fill, or the personality of the icon.
White space: The empty area around or inside a glyph within the icon’s frame that is not the glyph itself.
Width: Width refers to horizontal measurements of design elements, glyphs, or icons.