Graphics

Differences between revisions 13 and 14

Read this Site in your language:

Introduction

Contents

Introduction
1. Moinmoin markup
2. Names and sizes
Branding
1. Logo
2. Roundel
Icons
1. Pictograms
2. Social media

This page describes the availability and use of icons in the Ubuntu GNOME Wiki. If you wish to insert icons into your wiki page, then please read this page and make full use of the splendid icons available. The page contains instruction on how to use icons in the moinmoin markup and a complete list of the icons themselves. Enjoy!

Moinmoin markup

The moinmoin markup is the main pagetype to be used in the Ubuntu Wiki. For instructions as to its use, see HelpOnEditing. In order to insert icons or any other images, you simply use their wiki location like this:

attachment:UbuntuGNOME/Artwork/Graphics/roundel48.png

Produces:

UbuntuGNOME/Artwork/Graphics/roundel48.png

And this is an UbuntuGNOME/Artwork/Graphics/roundel24.png example of an in-line icon, and how the text will wrap around it and all that good stuff.

Names and sizes

The graphics you see here all have the standard size of 32px. In the tables below, the names are specified as icon_name.png. For instance, if you want to get a roundel, you shall use

attachment:UbuntuGNOME/Artwork/Graphics/roundel.png

Branding

Logo

Image	Name	SVG Source
	logo.png	Download

Roundel

Image	Name	SVG Source
	roundel.png	Download

Icons

Pictograms

Image	Name	SVG Source
	accessibilityXX.png	Download
	artworkXX.png	Download
	brainstormingXX.png	Download
	bugsquadXX.png	Download
	comunicationsXX.png	Download
	contactXX.png	Download
	develpmentXX.png	Download
	documentationXX.png	Download
	downloadXX.png	Download
	helpXX.png	Download
	informationXX.png	Download
	installXX.png	Download
	loveXX.png	Download
	mediaXX.png	Download
	musicXX.png	Download
	onlineaccountsXX.png	Download
	peopleXX.png	Download
	photosXX.png	Download
	scheduleXX.png	Download
	shareXX.png	Download
	todoXX.png	Download
	translateXX.png	Download
	upgradeXX.png	Download
	utilitiesXX.png	Download
	videosXX.png	Download
	webXX.png	Download

Social media

Image	Name	SVG Source	Available sizes
	facebookXX.png	Download	24, 32, 48, 64, 96
	google+XX.png	Download	24, 32, 48, 64, 96
	google+_communityXX.png	Download	24, 32, 48, 64, 96
	twitterXX.png	Download	24, 32, 48, 64, 96
	youtubeXX.png	Download	24, 32, 48, 64, 96

UbuntuGNOME/Artwork/Graphics (last edited 2015-08-19 03:36:03 by 179)

-  ⇤ ← Revision 13 as of 2014-11-07 22:12:58 → 
  Size: 8311
  Editor: eliasps
  Comment: Added link to Greek translation at the top of the page
+   ← Revision 14 as of 2015-08-16 18:47:44 → ⇥
  Size: 7559
  Editor: inoki
  Comment: Updated icons and their sizes to match the wiki and the new brand. More changes coming.
-Deletions are marked like this.
+Additions are marked like this.
 Line 31:
-{{attachment:UbuntuGNOME/Artwork/Graphics/logo_tiny.png}} This is an icon with text beside it, and I'm going to type and type and type so that you can see how it wraps, because you like to see how stuff works, since it's how people usually are able to learn, especially with code.
-Line 35:
+Line 33:
-== Of names and sizes ==
Most of the graphics are available in several sizes. In the tables below, the names are specified as `icon_nameXX.png` where XX is the size. For instance, if you want to get 64x64 sized roundel, you shall use
+== Names and sizes ==
The graphics you see here all have the standard size of 32px. In the tables below, the names are specified as `icon_name.png`. For instance, if you want to get a roundel, you shall use
-Line 38:
+Line 36:
-attachment:UbuntuGNOME/Artwork/Graphics/roundel64.png
+attachment:UbuntuGNOME/Artwork/Graphics/roundel.png
-Line 45:
+Line 43:
-||<rowstyle="background:#0087ED; color:#FFFFFF; text-align: center; font-weight: bold"> Image||Name||SVG Source||Available sizes||
||{{attachment:UbuntuGNOME/Artwork/Graphics/logo_small.png}} || logo_XX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/logo.svg|Download]] || tiny, extra_small, small, medium, large, extra_large ||
+||<rowstyle="background:#0087ED; color:#FFFFFF; text-align: center; font-weight: bold"> Image||Name||SVG Source||
||{{attachment:UbuntuGNOME/Artwork/Graphics/logo_small.png}} || logo.png || [[attachment:UbuntuGNOME/Artwork/Graphics/logo.svg|Download]] ||
-Line 49:
+Line 47:
-||<rowstyle="background:#0087ED; color:#FFFFFF; text-align: center; font-weight: bold"> Image||Name||SVG Source||Available sizes||
||{{attachment:UbuntuGNOME/Artwork/Graphics/roundel48.png}} || roundelXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/roundel.svg|Download]] || 16, 24, 32, 48, 64, 96, 128, 254 ||
+||<rowstyle="background:#0087ED; color:#FFFFFF; text-align: center; font-weight: bold"> Image||Name||SVG Source||
||{{attachment:UbuntuGNOME/Artwork/Graphics/roundel48.png}} || roundel.png || [[attachment:UbuntuGNOME/Artwork/Graphics/roundel.svg|Download]] ||
-Line 56:
+Line 54:
-||<rowstyle="background:#0087ED; color:#FFFFFF; text-align: center; font-weight: bold"> Image||Name||SVG Source||Available sizes||
||{{attachment:UbuntuGNOME/Artwork/Graphics/accessibility48.png}} || accessibilityXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/artwork48.png}} || artworkXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/brainstorming48.png}} || brainstormingXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/bugsquad48.png}} || bugsquadXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/communications48.png}} || comunicationsXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/contact48.png}} || contactXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/develpment48.png}} || develpmentXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/documentation48.png}} || documentationXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/download48.png}} || downloadXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/help48.png}} || helpXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/information48.png}} || informationXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/install48.png}} || installXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/love48.png}} || loveXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/media48.png}} || mediaXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/music48.png}} || musicXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/onlineaccounts48.png}} || onlineaccountsXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/people48.png}} || peopleXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/photos48.png}} || photosXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/schedule48.png}} || scheduleXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/share48.png}} || shareXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/todo48.png}} || todoXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/translate48.png}} || translateXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/upgrade48.png}} || upgradeXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/utilities48.png}} || utilitiesXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/videos48.png}} || videosXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/web48.png}} || webXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] || 24, 48 ||

TODO: Guide to create them.
+||<rowstyle="background:#0087ED; color:#FFFFFF; text-align: center; font-weight: bold"> Image||Name||SVG Source||
||{{attachment:UbuntuGNOME/Artwork/Graphics/accessibility48.png}} || accessibilityXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/artwork48.png}} || artworkXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/brainstorming48.png}} || brainstormingXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/bugsquad48.png}} || bugsquadXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/communications48.png}} || comunicationsXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/contact48.png}} || contactXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/develpment48.png}} || develpmentXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/documentation48.png}} || documentationXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/download48.png}} || downloadXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/help48.png}} || helpXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/information48.png}} || informationXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/install48.png}} || installXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/love48.png}} || loveXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/media48.png}} || mediaXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/music48.png}} || musicXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/onlineaccounts48.png}} || onlineaccountsXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/people48.png}} || peopleXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/photos48.png}} || photosXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/schedule48.png}} || scheduleXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/share48.png}} || shareXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/todo48.png}} || todoXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/translate48.png}} || translateXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/upgrade48.png}} || upgradeXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/utilities48.png}} || utilitiesXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/videos48.png}} || videosXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||
||{{attachment:UbuntuGNOME/Artwork/Graphics/web48.png}} || webXX.png || [[attachment:UbuntuGNOME/Artwork/Graphics/pictograms.svg|Download]] ||