You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Learn about the concepts that are the building blocks of the iconography and other imagery in Visual Studio by using this visual reference.
08/04/2017
Jamie.Young
reference
maiak
maiak
mijacobs
extensibility-integration
Visual language dictionary
Visual Studio uses a common visual language to illustrate the concepts that are the building blocks of its iconography and other imagery. When designing new icons, use this dictionary to identify the concepts that you want to convey in your own image.
General guidelines
These visual concepts must be used consistently with their dictionary definition. Otherwise, you risk confusing your users, who expect common elements to have consistent meanings.
Choose only the most relevant or important concepts for use in your icons, so that the imagery is crisp and easy to distinguish.
Use only one or two concepts in each image.
For more strategies for designing icons, see Icon design.
Driver package template Driver test group explorer Network NDIS driver template
Dynamic
ASP.NET dynamic control C# dynamic data website Dynamic validator
Dynamic value
Copy dynamic value Empty dynamic value
E
Concept
Main icon
Other examples
Notes
Edit
Address editor Edit query Edit relation
The Edit annotation faces left or right depending on what the base icon looks like. Choose the orientation that looks best with your overall icon design.
Effects Same as "Function," "Variable (global)"
Empty
Blank page C++ empty project F# empty website project
Enumerator
Create enumerator
Environment
Connect to environment Create library environment Library environment
Event Trigger
Add event Event log
Expand
Return expanded value
Expand/Contract
The expand/contract icons are used in layout situations to indicate that space between two elements will be condensed.
Export Same as "Open"
Export filter Export report data Export report filter
F
Concept
Main icon
Other examples
Notes
Favorite Protected, Rating
Add to favorites Rating
Field
Add field Edit field
Field (code element)
Go to field New field
Filter
Auto filter Chart filter Export filter
Finance
Money editor
Flagged
Flag thread flagged Flag thread not flagged Show only flagged threads
Flow
Folder
Documents library Find in files Folder open Linked folder open
Font
Font color Font size Serif
Frame
Friend
Function Expression Same as "Effects" and "Variable (global)"
Function warning WPF page function
G
Concept
Main icon
Other examples
Notes
Get Download
Get download folder Get dictionary value Get item from collection
Graph Bar chart
HPC performance session
Graphics (3D)
Grid
Asset data grid control Grid app C++ Toggle grid
Grid web layout
Grid element Grid splitter element
Grouping
Dialog group Team Virtual machines
Stacking multiple objects on top of each other represents the concept of grouping or multiplicity.
H
Concept
Main icon
Other examples
Notes
Hierarchy
Hierarchy variable Call hierarchy
History
Home
LightSwitch home screen
I
Concept
Main icon
Other examples
Notes
Idea
Image Assets, Resource
Image loader Image button Image list control
Important Attention, Hot path
Show hot lines Hotspot
Indexer
Add indexer
Inheritance
Add inherited control Add inherited form Inherited control
The concept of derived inheritance is represented by a dotted corner. See also "Nonsubstantive (hidden or template)" and "Virtual."
Inheritance (arrow)
The inheritance (arrow) icon represents a toolbox control for a modeling surface.
Interface
Implement interface
Item
Copy item Create list item Check in item
K
Concept
Main icon
Other examples
Notes
Key Permission, ID
New key Permission Get current item ID
Key performance indicator (KPI)
Delete KPI KPI browser view KPI with error
L
Concept
Main icon
Other examples
Notes
Library
C++ class library project Exports library F# Windows Forms control library
Link
Convert to hyperlink Create linked table Edit link
Lock Private, Permission
Lock X axis Branch permissions Private queue
Log
Catalog properties Action log Connect test plan
Loop
Add or insert conditional loop Conditional loop
M
Concept
Main icon
Other examples
Notes
Mail Message
Message queue Message received trace Email address viewer
Manifest
Edit manifest Extension manager manifest New application manifest
Markup
Markup error Markup tag Tag or event snippet Match tag Edit tag
The markup concept is also used as an element in several compound concepts.
Markup: HTML (web)
HTML file
Markup: XAML (WPF)
WPF application WPF browser application VB WPF control library
Markup: XML
Reload XML XML file
Master page
File from new master
Measure
Measure calculated Measure expression
Media Film
My movie collection
Member Material editor, Specular for 3D
Add member Member calculated Member variable
Memory (chip)
Memory configuration Memory array Page file
Memory Memory tool window
Merge
Automerge all Merge changes with tool Merge module reference
Message Chat
Method
Extract method Invoke method Cube builder view
Mobile phone
Mobile services Mobile game components VB mobile web project