Ícones para aplicativos do Windows

Imagem de cabeçalho de ícones

Os ícones fornecem uma abreviação visual para uma ação, um conceito ou um produto. Ao compactar o significado em uma imagem simbólica, os ícones podem transpor barreiras de idioma e ajudar a conservar um recurso extremamente valioso: o espaço na tela.

Ícones podem ser exibidos dentro e fora de aplicativos:

Ícones dentro do aplicativo

ícones dentro do aplicativo Dentro de seu aplicativo, use ícones para representar uma ação, como copiar o texto ou navegar até a página de configurações.

Ícones fora do aplicativo

ícones fora do aplicativo Fora do seu aplicativo, o Windows usa um ícone para representá-lo no menu Iniciar e na barra de tarefas. Se o usuário optar por fixar o seu aplicativo no menu Iniciar, o bloco de início do seu aplicativo pode apresentar o ícone do aplicativo. O ícone do seu aplicativo aparece na barra de título e você pode optar por criar uma tela inicial com o logotipo do aplicativo.

Este artigo descreve os ícones no seu aplicativo. Para saber mais sobre ícones fora do aplicativo (ícones de aplicativos), veja o artigo sobre ícones de aplicativo e bloco.

Quando usar os ícones

Ícones podem economizar espaço, mas quando você deve usá-los?

Primeira imagem de uma barra verde que tem uma marca de seleção verde e a palavra Faça isso Captura de tela que mostra os ícones Recortar, Copiar, Colar e Salvar

Use ícones para ações, como recortar, copiar, colar e salvar, ou para itens de navegação em um menu de navegação.

Primeira imagem de uma barra vermelha que tem um X vermelho e a palavra Não faça isso Captura de tela que mostra os ícones de Educação, Toque e Calendário

Use um ícone se já existir um para o conceito que deseja representar. (Para ver se existe um ícone, verifique a lista de ícones da Segoe.)

Segunda imagem de uma barra verde que tem uma marca de seleção verde e a palavra Faça isso Captura de tela de um ícone de carrinho de compras simples e conhecido

Use um ícone se for fácil para o usuário entender o que ele significa e se for simples o bastante para ser entendido em tamanhos pequenos.

Segunda imagem de uma barra vermelha que tem um X vermelho e a palavra Não faça isso Captura de tela de um ícone de carrinho de compras complexo e desconhecido

Não use um ícone se o significado não está claro, ou se para que fique claro seja necessário usar uma forma complexa.

Usar o tipo correto de ícone

Há muitas maneiras de criar um ícone. É possível: Usar uma fonte de símbolo como Segoe MDL2 Assets. Criar sua própria imagem com base em vetor. Usar uma imagem de bitmap, embora isso não seja recomendado. Veja um resumo das diferentes maneiras de adicionar um ícone ao aplicativo.

Use um ícone predefinido.

A Microsoft fornece mais de 1.000 ícones na forma da fonte Segoe MDL2 Assets. Talvez não seja intuitivo obter um ícone a partir de uma fonte, mas nossa tecnologia de exibição de fonte proporciona a nitidez ideal em qualquer tela, em qualquer resolução e em qualquer tamanho. Para obter instruções, confira Ícones Segoe MDL2.

imagem de ícone predefinida

Use uma fonte.

Você não precisa usar a fonte Segoe MDL2 Assets, é possível usar qualquer fonte que o usuário tenha instalada no sistema, como Wingdings ou Webdings.

imagem Wingdings

Use um arquivo de Elementos Gráficos Vetoriais Escaláveis (SVG).

Os recursos SVG são ideais para ícones, pois sempre têm aparência nítida em qualquer tamanho ou resolução. A maioria dos aplicativos de desenho pode exportar para SVG. Para obter instruções, confira SVGImageSource.

imagem SVG

Use objetos geométricos.

Como os arquivos SVG, objetos geométricos são um recurso baseado em vetor, então sempre têm aparência nítida. No entanto, é complicado criar um objeto geométrico, pois você precisa especificar individualmente cada ponto e curva. É uma boa opção somente se você precisar modificar o ícone enquanto o aplicativo está em execução (para animá-lo, por exemplo). Para ver instruções, confira Mover e desenhar comandos para objetos geométricos.

Imagem de objetos geométricos

Também é possível usar uma imagem bitmap, como PNG, GIF ou JPEG, embora isso não seja recomendado.

As imagens bitmap são criadas com um tamanho específico para poderem ser dimensionadas dependendo do tamanho desejado do ícone e da resolução da tela. Quando a imagem é redimensionada (reduzida), pode parecer desfocada; quando é ampliada, pode parecer irregular e pixelada. Se precisa usar uma imagem bitmap, recomendamos usar PNG ou GIF ao invés de JPEG.

o que não fazer imagem Bitmap

Faça o ícone fazer algo

Depois que você tiver um ícone, a próxima etapa é fazê-lo realizar algo, associando-o a uma ação de comando ou navegação. A melhor maneira para fazer isso é adicionar o ícone a um botão ou uma barra de comando.

Imagem da barra de comando

Criar um botão de ícone

Você pode colocar um ícone em um botão padrão. Como é possível usar botões em vários lugares, isso confere um pouco mais de flexibilidade de exibição para o ícone de ação.

Existem algumas maneiras de adicionar um ícone a um botão:

Etapa 1
Defina a família de fontes do botão como Segoe MDL2 Assets e sua propriedade de conteúdo como o valor Unicode do glifo que deseja usar:

Etapa 1 de criação de um botão de ícone

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />

Etapa 2
É possível usar um dos objetos de elemento de ícone: BitmapIcon, FontIcon, PathIcon ou SymbolIcon. Isso oferece mais tipos de ícones para escolher e permite combinar ícones e outros tipos de conteúdo, como texto, se você quiser:

Etapa 2 de criação de um botão de ícone

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>

Criar uma série de ícones em uma barra de comando

Quando se tem uma série de comandos que funcionam juntos, como cortar/copiar/colar ou um conjunto de comandos de desenho para um programa de edição de fotos, coloque-os juntos em uma barra de comando. Uma barra de comando usa um ou mais botões ou botões de alternância da barra de aplicativos, cada um representando uma ação. Cada botão tem uma propriedade Icon que você pode usar para controlar qual ícone é exibido. Existem diversas maneiras de especificar o ícone.

Exemplo de uma barra de comandos com ícones

A maneira mais fácil é usar a lista de ícones predefinidos fornecida: apenas especifique o nome do ícone, como "Voltar" ou "Parar", e o sistema o desenhará:

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>

Para ver a lista completa de nomes de ícone, confira a enumeração Symbol.

Há outras maneiras de fornecer ícones para um botão em uma barra de comando:

  • FontIcon: o ícone tem por base um glifo de uma família de fontes especificada.
  • BitmapIcon: o ícone tem por base um arquivo de imagem bitmap com um Uri especificado.
  • PathIcon: o ícone tem por base os dados de Path.

Para saber mais sobre as barras de comandos, confira o artigo sobre a barra de comando.