Standard CODE Framework Icons

Standard Icon Resources

All the CODE Framework WPF themes support a list of standard icons in the form of Brush resources that can be used to fill any WPF object (typically, this is used as the fill color for a rectangle of the desired size).

Note that all icons are defined as vector graphics expressed as Brushes, so they can be used as “fill colors” wherever brushes are used. They can also be used by resource name in elements that support brush resources directly. Since icons are based on vector graphics, they can be used at any size without loss of quality.

Here’s an example where an icon is used as a “fill color”:

<Rectangle Height="36" Width="36" Fill="{DynamicResource CODE.Framework.Canvas-Icon-Paste}" />

Note: There also is a special ThemeIcon object that simplifies this task further. Here is the equivalent of the prior example using this control:

<mvvm:ThemeIcon StandardIcon="Paste" />

For more information about the ThemeIcon control, see ThemeIcon.

The following is an example for an object that supports resources directly:

new ViewAction("Full Screen",
               execute: (a, o) => FullScreen(), 
               brushResourceKey: "CODE.Framework-Icon-ZoomIn");

Note that there also is a more strongly-typed shortcut that makes it easier to find icons:

new ViewAction("Full Screen",
               execute: (a, o) => FullScreen(), 
               standardIcon: StandardIcons.ZoomIn);

Using the StandardIcons enum, it is easier to see what all the supported standard icons are, and it is easier to remember their names. It is also less error prone to use this enum, since it is strongly typed and compiler-checked. Note however that this is just a shortcut to set the brush resource key. In other words: When the standard icon is set using the enum, code behind the scenes simply assigns the appropriate brush resource key.

Note that using the StandardIcons enum limits your choices to the list of icons defined in the enum. If you want to use your own icons of different names, simply set the brush resource key directly. For instance, you can do the following:

new ViewAction("Full Screen",
               execute: (a, o) => FullScreen(), 
               brushResourceKey: "MyGreatIcon");

Note: For more info on how to create your own icons, see Custom Icons.

It is also possible to use standard icon resources programmatically. For instance, if you want to assign a brush to an object, you can do the following:

var rect = new Rectangle();
rect.Fill = Application.Current.FindResource("CODE.Framework-Icon-ZoomIn") as Brush;

Or, a view model could have a property that retrieves a brush (which one could later use for binding):

public Brush SomeLogo
{
    get
    {
        return Application.Current.FindResource("CODE.Framework-Icon-ZoomIn") as Brush;
    }
}

Metro icons are all monochrome and use a single defined color/brush to draw themselves. That color can be changed, simply by redefining those color resources. Here is the default definition for those colors:

<Color x:Key="CODE.Framework-Metro-IconForegroundColor">Black</Color>
<SolidColorBrush x:Key="CODE.Framework-Metro-IconForegroundBrush" Color="{DynamicResource CODE.Framework-Metro-IconForegroundColor}" />

When using standard view models, the model class provides methods to load brush resources. The simplest way to load a brush resource in a standard view model is through the GetBrushFromResource() method:

public class CustomerQuickInformation : StandardViewModel
{
     public CustomerQuickInformation()
     {
         Image1 = GetBrushFromResource("CODE.Framework-Icon-Home");
     }
}

This loads the resource and performs a few additional tasks such as making sure resource uses appropriately themed colors. Note that this can at times be a performance intensive task and should thus be used with care. If you have to load hundreds of brush resources (as is often the case in large lists) and many or all of those items share the same icon, there are more specific methods such as LoadSharedImage1FromBrushResource() that perform the same task but in a highly optimized way that works particularly well for numerous instances of the same view model:

public class CustomerQuickInformation : StandardViewModel
{
     public CustomerQuickInformation()
     {
         LoadSharedImage1FromBrushResource("CODE.Framework-Icon-Home");
     }
}

Note there this loads the brush and assigns it internally to Image1. There are equivalent methods for all image and logo properties.

Side-Note: Other Icons
For a very large selection of additional icon resources (specifically designed for XAML use, but also available as SVG and various bitmap formats such as JPG, PNG,…) check out www.Xamalot.com!

List of Supported Icons

The following is a list of supported icons:

Note: Whenever no icon is specified for a specific theme, the Metro icon is used as a default.

Resource Name Battleship Geek Metro Vapor Wildcat Workplace
CODE.Framework-Icon-Accounts
CODE.Framework-Icon-Add
CODE.Framework-Icon-Admin
CODE.Framework-Icon-AlignCenter
CODE.Framework-Icon-AlignLeft
CODE.Framework-Icon-AlignRight
CODE.Framework-Icon-ArrowDown
CODE.Framework-Icon-ArrowDownLeft
CODE.Framework-Icon-ArrowDownRight
CODE.Framework-Icon-ArrowLeft
CODE.Framework-Icon-ArrowRight
CODE.Framework-Icon-ArrowUp
CODE.Framework-Icon-ArrowUpLeft
CODE.Framework-Icon-ArrowUpRight
CODE.Framework-Icon-Attach
CODE.Framework-Icon-AttachCamera
CODE.Framework-Icon-Audio
CODE.Framework-Icon-Bold
CODE.Framework-Icon-Bookmarks
CODE.Framework-Icon-BrowsePhotos
CODE.Framework-Icon-Bullets
CODE.Framework-Icon-Calendar
CODE.Framework-Icon-Caption
CODE.Framework-Icon-Cc
CODE.Framework-Icon-Characters
CODE.Framework-Icon-Clock
CODE.Framework-Icon-ClosePane
CODE.Framework-Icon-Collapsed
CODE.Framework-Icon-Comment
CODE.Framework-Icon-Contact
CODE.Framework-Icon-Contact2
CODE.Framework-Icon-ContactInfo
CODE.Framework-Icon-Copy
CODE.Framework-Icon-Crop
CODE.Framework-Icon-Cut
CODE.Framework-Icon-Data
CODE.Framework-Icon-Data2
CODE.Framework-Icon-Data3
CODE.Framework-Icon-Day
CODE.Framework-Icon-DisableUpdates
CODE.Framework-Icon-Discard
CODE.Framework-Icon-Dislike
CODE.Framework-Icon-DockBottom
CODE.Framework-Icon-DockLeft
CODE.Framework-Icon-DockRight
CODE.Framework-Icon-Document
CODE.Framework-Icon-Download
CODE.Framework-Icon-Edit
CODE.Framework-Icon-Emoji
CODE.Framework-Icon-Emoji2
CODE.Framework-Icon-Expanded
CODE.Framework-Icon-Favorite
CODE.Framework-Icon-Filter
CODE.Framework-Icon-Flag
CODE.Framework-Icon-Folder
CODE.Framework-Icon-Font
CODE.Framework-Icon-FontColor
CODE.Framework-Icon-Globe
CODE.Framework-Icon-Go
CODE.Framework-Icon-HangUp
CODE.Framework-Icon-Help
CODE.Framework-Icon-HideBcc
CODE.Framework-Icon-Highlight
CODE.Framework-Icon-Home
CODE.Framework-Icon-Import
CODE.Framework-Icon-ImportAll
CODE.Framework-Icon-Important
CODE.Framework-Icon-Italic
CODE.Framework-Icon-Keyboard
CODE.Framework-Icon-Like
CODE.Framework-Icon-LikeDislike
CODE.Framework-Icon-Link
CODE.Framework-Icon-List
CODE.Framework-Icon-Login
CODE.Framework-Icon-Mail
CODE.Framework-Icon-Mail2
CODE.Framework-Icon-MailForward
CODE.Framework-Icon-MailReply
CODE.Framework-Icon-MailReplyAll
CODE.Framework-Icon-MapPin
CODE.Framework-Icon-Menu
CODE.Framework-Icon-Message
CODE.Framework-Icon-MissingIcon
CODE.Framework-Icon-Money
CODE.Framework-Icon-More
CODE.Framework-Icon-MoveToFolder
CODE.Framework-Icon-MusicInfo
CODE.Framework-Icon-Mute
CODE.Framework-Icon-Next
CODE.Framework-Icon-No
CODE.Framework-Icon-OpenFile
CODE.Framework-Icon-OpenLocal
CODE.Framework-Icon-Orientation
CODE.Framework-Icon-OtherUser
CODE.Framework-Icon-Out
CODE.Framework-Icon-Page
CODE.Framework-Icon-Page2
CODE.Framework-Icon-Paste
CODE.Framework-Icon-Pause
CODE.Framework-Icon-People
CODE.Framework-Icon-Permissions
CODE.Framework-Icon-Phone
CODE.Framework-Icon-Photo
CODE.Framework-Icon-Pictures
CODE.Framework-Icon-Pin
CODE.Framework-Icon-Placeholder
CODE.Framework-Icon-Play
CODE.Framework-Icon-Presence
CODE.Framework-Icon-Preview
CODE.Framework-Icon-PreviewLink
CODE.Framework-Icon-Previous
CODE.Framework-Icon-Print
CODE.Framework-Icon-Priority
CODE.Framework-Icon-ProtectedDocument
CODE.Framework-Icon-Read
CODE.Framework-Icon-Redo
CODE.Framework-Icon-Refresh
CODE.Framework-Icon-Remote
CODE.Framework-Icon-Remove
CODE.Framework-Icon-Rename
CODE.Framework-Icon-Repair
CODE.Framework-Icon-RotateCamera
CODE.Framework-Icon-Save
CODE.Framework-Icon-SaveLocal
CODE.Framework-Icon-Search
CODE.Framework-Icon-SelectAll
CODE.Framework-Icon-Send
CODE.Framework-Icon-SetLockscreen
CODE.Framework-Icon-Settings
CODE.Framework-Icon-SetTitle
CODE.Framework-Icon-Shop
CODE.Framework-Icon-ShowBcc
CODE.Framework-Icon-ShowResults
CODE.Framework-Icon-Shuffle
CODE.Framework-Icon-SkipAhead
CODE.Framework-Icon-SkipBack
CODE.Framework-Icon-Skydrive
CODE.Framework-Icon-Slideshow
CODE.Framework-Icon-Sort
CODE.Framework-Icon-SortAscending
CODE.Framework-Icon-SortDescending
CODE.Framework-Icon-Stop
CODE.Framework-Icon-StopSlideshow
CODE.Framework-Icon-Switch
CODE.Framework-Icon-Sync
CODE.Framework-Icon-Today
CODE.Framework-Icon-Trim
CODE.Framework-Icon-TwoPage
CODE.Framework-Icon-Underline
CODE.Framework-Icon-Undo
CODE.Framework-Icon-Unfavorite
CODE.Framework-Icon-UnPin
CODE.Framework-Icon-Upload
CODE.Framework-Icon-User
CODE.Framework-Icon-UserRights
CODE.Framework-Icon-UserRoles
CODE.Framework-Icon-Users
CODE.Framework-Icon-Video
CODE.Framework-Icon-VideoChat
CODE.Framework-Icon-View
CODE.Framework-Icon-ViewAll
CODE.Framework-Icon-Volume
CODE.Framework-Icon-Webcam
CODE.Framework-Icon-Week
CODE.Framework-Icon-World
CODE.Framework-Icon-Yes
CODE.Framework-Icon-Zoom
CODE.Framework-Icon-ZoomIn
CODE.Framework-Icon-ZoomOut