Difference between revisions of "ArtLibreSet"

From Tango Desktop Project
Jump to: navigation, search
Line 272: Line 272:
| '''Preview''' || '''Scalable''' || '''Icon name''' ||'''Description'''
| '''Preview''' || '''Scalable''' || '''Icon name''' ||'''Description'''
| http://tango.freedesktop.org/static/cvs/tango-art-libre/16x16/devices/input-tablet.png http://tango.freedesktop.org/static/cvs/tango-art-libre/22x22/devices/input-tablet.png || [http://tango.freedesktop.org/static/cvs/tango-art-libre/16x16/devices/input-tablet.svg 16x16] [http://tango.freedesktop.org/static/cvs/tango-art-libre/22x22/devices/input-tablet.svg 22x22] || ''input-tablet''  || A graphic tablet.   
| http://tango.freedesktop.org/static/cvs/tango-art-libre/16x16/devices/input-tablet.png http://tango.freedesktop.org/static/cvs/tango-art-libre/22x22/devices/input-tablet.png || [http://tango.freedesktop.org/static/cvs/tango-art-libre/16x16/devices/input-tablet.svg 16x16] [http://tango.freedesktop.org/static/cvs/tango-art-libre/22x22/devices/input-tablet.svg 22x22] [http://tango.freedesktop.org/static/cvs/tango-art-libre/scalable/devices/input-tablet.svg svg]|| ''input-tablet''  || A graphic tablet.   
| http://tango.freedesktop.org/static/cvs/tango-art-libre/16x16/devices/input-scanner.png http://tango.freedesktop.org/static/cvs/tango-art-libre/22x22/devices/input-scanner.png || [http://tango.freedesktop.org/static/cvs/tango-art-libre/16x16/devices/input-scanner.svg 16x16] [http://tango.freedesktop.org/static/cvs/tango-art-libre/22x22/devices/input-scanner.svg 22x22] || ''input-scanner''  || An image scanner. A table version.
| http://tango.freedesktop.org/static/cvs/tango-art-libre/16x16/devices/input-scanner.png http://tango.freedesktop.org/static/cvs/tango-art-libre/22x22/devices/input-scanner.png || [http://tango.freedesktop.org/static/cvs/tango-art-libre/16x16/devices/input-scanner.svg 16x16] [http://tango.freedesktop.org/static/cvs/tango-art-libre/22x22/devices/input-scanner.svg 22x22] [http://tango.freedesktop.org/static/cvs/tango-art-libre/scalable/devices/input-scanner.svg svg] || ''input-scanner''  || An image scanner. A table version.

Revision as of 14:45, 16 March 2009

The following icon set aims to fulfill the need of a typical graphic application. We have taken bitmap editor, vector editor and a non-linear video editing application as the target user.

The set will be distributed under the terms of the GPL.

Work in Progress

This document is a work in progress. The tables are not sorted in any way and you are welcome to add more icons to the list that you believe have the proposition of being more universably useful in graphic applications. Please try to avoid abbreviations as they are a little less predicatable, use full words instead like for example horizontal and vertical. Do your best to use terms consistently.

This also means that if you have decided to make use of this spec right now, you should consider postponing any planned changes.


The major structure of the set is divided into:

  • Actions
  • Devices
  • Tools
  • Effects
  • Transformations
  • Status
  • Toggles
  • Hints


Preview scalable Icon name Description
align-vertical-bottom.png align-vertical-bottom.png 16x16 22x22 align-vertical-bottom Align objects to the bottom edge
align-vertical-top.png align-vertical-top.png 16x16 22x22 align-vertical-top Align objects to the top edge
align-vertical-center.png align-vertical-center.png 16x16 22x22 align-vertical-center Center on vertical axis
align-horizontal-left.png align-horizontal-left.png 16x16 22x22 align-horizontal-left Align objects to the left edge
align-horizontal-right.png align-horizontal-right.png 16x16 22x22 align-horizontal-right Align objects to the right edge
align-horizontal-center.png align-horizontal-center.png 16x16 22x22 align-horizontal-center Center on horizontal axis
n/a distribute-horizontal-left.png n/a 22x22 distribute-horizontal-left Distribute objects horizontally left-aligned
distribute-horizontal-right.png distribute-horizontal-right.png 16x16 22x22 distribute-horizontal-right Distribute objects horizontally right-aligned
n/a n/a distribute-horizontal-center Distribute objects horizontally center-aligned
distribute-vertical-top.png distribute-vertical-top.png 16x16 22x22 distribute-vertical-top Distribute objects vertically top-aligned
distribute-vertical-bottom.png distribute-vertical-bottom.png 16x16 22x22 distribute-vertical-bottom Distribute objects vertically bottom-aligned
n/a distribute-vertical-center.png n/a 22x22 distribute-vertical-center Distribute objects vertically center-aligned
n/a n/a anchor-layer Anchor a floating selection to the layer below it
n/a n/a bitmap-export Export the current image as a bitmap
n/a n/a bitmap-import Import a bitmap
n/a n/a boolean-exclusion Take the boolean exclusion of the selected items
n/a n/a boolean-difference Take the boolean difference of the selected items
n/a n/a boolean-intersection Take the boolean intersection of the selected items
n/a n/a boolean-union Take the boolean union of the selected items
n/a n/a cleanup
n/a n/a color-balance Adjust balance
color-brightness-contrast.png color-brightness-contrast.png 16x16 22x22 color-brightness-contrast Adjust brightness and contrast
n/a n/a color-colorize Apply colorization
n/a n/a color-curves Ajust RGB, R, G or B curves
n/a n/a color-histogram Show the image's histogram
n/a n/a color-hue-saturation Adjust hue and saturation
n/a n/a color-levels Adjust color levels
n/a n/a color-posterize Apply posterizarion
n/a n/a color-threshold Adjust threshold
n/a n/a color-invert Invert Colors
n/a n/a configure-grid Open a dialog of grid's settings
n/a n/a convert-to-path Convert current selection to a path
n/a n/a display-filters Open 'Display filters' dialog
n/a n/a distribute-left-sides-equidist Distribute left sides of objects equidistantly
n/a n/a distribute-right-sides-equidist Distribute right sides of objects equidistantly
n/a n/a distribute-centers-equidist-horizontal Distribute centers of objects equidistantly horizontally
n/a n/a distribute-centers-equidist-vertical Distribute centers of objects equidistantly vertically
n/a n/a distribute-bottoms-equidist Distribute bottoms of objects equidistantly
n/a n/a distribute-tops-equidist Distribute tops of objects equidistantly
n/a n/a distribute-gaps-equal-horizontal Make gaps between objects equidistant horizontally
n/a n/a distribute-gaps-equal-vertical Make gaps between objects equidistant vertically
n/a n/a distribute-baseline-anchors-horizontal Distribute baseline anchors of text horizontally
n/a n/a distribute-baseline-anchors-vertical Distribute baseline anchors of text vertically
n/a n/a dynamic-offset
n/a n/a fill-with-background-color Fill selection/image with background color
n/a n/a fill-with-foreground-color Fill selection/image with foreground color
n/a n/a fill-with-pattern Fill selection/image with a pattern
n/a n/a flip-horizontal Flip an object in x axis (horizontally)
n/a n/a flip-vertical Flip an object in y axis (vertically)
n/a n/a fit-image-in-window-vertical Fit image in window vertically
n/a n/a fit-image-in-window-horizontal Fit image in window horizontally
n/a n/a image-properties Open a dialog to change current image's properties i.e. metadata
n/a n/a item-clone Clone an item. Creates a linked copy of an item
n/a n/a item-duplicate Duplicate an item
n/a n/a linked-offset
n/a n/a media-seek-prev-cut Seek to previous cut. Should be in media-icons style
n/a n/a media-seek-next-cut Seek to next cut. Should be in media-icons style
n/a n/a merge-down Merge current layer with the one below it
node-add.png node-add.png 16x16 22x22 node-add Add a node
node-align-horizontal.png node-align-horizontal.png 16x16 22x22 node-align-horizontal
node-align-vertical.png node-align-vertical.png 16x16 22x22 node-align-vertical
node-break.png node-break.png 16x16 22x22 node-break Break node into two disjoined nodes
node-curve.png 22x22 node-curve Make selected nodes a curve (as opposed to a line)
node-cusp.png node-cusp.png 16x16 22x22 node-cusp Make node a corner (as opposed to smooth)
node-delete.png node-delete.png 16x16 22x22 node-delete Delete selected node
node-delete-segment.png node-delete-segment.png 16x16 22x22 node-delete-segment Remove join between two nodes
node-distribute-horizontal.png node-distribute-horizontal.png 16x16 22x22 node-distribute-horizontal
node-distribute-vertical.png node-distribute-vertical.png 16x16 22x22 node-distribute-vertical
node-insert.png node-insert.png 16x16 22x22 node-insert Insert a new node right between two selected ones
node-join.png node-join.png 16x16 22x22 node-join Merge two nodes into one
node-join-segment.png node-join-segment.png 16x16 22x22 node-join-segment Join two nodes together
n/a node-line.png n/a 22x22 node-line Make selected nodes a line (as opposed to a curve)
node-smooth.png node-smooth.png 16x16 22x22 node-smooth Make node smooth (as opposed to a corner)
node-symmetric.png node-symmetric.png 16x16 22x22 node-symmetric Make node handles equal length
n/a node-to-curve.png n/a 22x22 node-to-curve
object-group.png n/a 16x16 n/a object-group
object-to-path.png object-to-path.png 16x16 22x22 object-to-path
object-ungroup.png n/a 16x16 n/a object-ungroup
n/a n/a page-copy Copy a page
n/a n/a page-delete Delete a page
n/a n/a paste-in-place Paste copied object exactly to the place ot was copied from
n/a n/a paste-style Apply style of copied object to currently selected object(s)
n/a n/a path-cut
n/a n/a path-difference Cut a path out of another path
n/a n/a path-division Cut a path using the edge of another path
n/a n/a path-exclusion Exclude area where two paths overlap
n/a n/a path-intersection Include only the area where two paths overlap
n/a n/a path-union merge paths together as one path
n/a n/a path-simplify Simplyfy (smoothen) the path
n/a n/a path-inset Move path inwards on itself
n/a n/a path-outset Move path outwards from itself
n/a n/a save-to-channel Save current selection to a channel
segment-curve.png segment-curve.png 16x16 22x22 segment-curve
segment-line.png segment-line.png 16x16 22x22 segment-line
n/a n/a select-all Select the whole image
n/a n/a select-border Create a border from inside and outside of selection
n/a n/a select-float Float current selection
n/a n/a select-grow Grow current selection
n/a n/a select-invert Invert current selection
n/a n/a select-none Remove selection
n/a n/a selection-bottom Move selection to bottom of stack (behind everything)
selection-break.png selection-break.png 16x16 22x22 selection-break
n/a n/a selection-cleanup
selection-combine.png n/a 16x16 n/a selection-combine
n/a n/a selection-down Move selection down in the stack (away from viewer)
selection-exclude.png selection-exclude.png 16x16 22x22 selection-exclude
n/a n/a selection-make-bitmap-copy
n/a n/a selection-reverse
n/a n/a selection-top Move selection to top of the stack (infront of everything)
n/a n/a selection-trace
n/a selection-union.png n/a 22x22 selection-union
n/a n/a selection-up Move selection up in the stack (towards viewer.)
n/a n/a shrink-wrap Shrink the window to match image's size no matter what it's zoom is
n/a n/a stroke-path Stroke a path
n/a n/a stroke-selection Stroke a selection
stroke-to-path.png stroke-to-path.png 16x16 22x22 stroke-to-path Convert the edge of a stroke to a path
n/a n/a select-shrink Shrink current selection
n/a n/a object-group Group selected objects
n/a n/a object-ungroup Ungroup selected objects


Preview Scalable Icon name Description
input-tablet.png input-tablet.png 16x16 22x22 svg input-tablet A graphic tablet.
input-scanner.png input-scanner.png 16x16 22x22 svg input-scanner An image scanner. A table version.


Icon name Description
tool-pointer Generic object selection and transformation
color-fill.png color-fill Tool for filling the whole selected area with one color.
color-gradient.png color-gradient Tool for creating a gradient from one color to another
color-picker.png color-picker Pick a color
clip-splitter.png clip-splitter To cut video clips in two
draw-airbrush.png draw-airbrush Tool for drawing airbrush lines
draw-brush.png draw-brush Tool for drawing brush lines (same as Paintbrush tool)
draw-calligraphic.png draw-calligraphic Tool for drawing calligraphic lines
draw-clone.png draw-clone Tool for copying colors from one area to another
draw-convolve.png draw-convolve Tool for blurring or sharpening the image
draw-dodge-burn.png draw-dodge-burn Tool for dodging or burning the image (brightening or darkening the image)
draw-ellipse.png draw-ellipse Tool for drawing ellipse shapes
draw-eraser.png draw-eraser Tool for erasing stuff on the canvas
draw-freehand.png draw-freehand Tool for drawing freehand lines (same as Pencil tool)
draw-ink.png draw-ink Tool for pressure/tilt sensitive drawing e.g. with a graphic tablet (Wacom etc.)
draw-line Tool for drawing straight lines
draw-path.png draw-path Tool for creating bezier paths/shapes
draw-polygon.png draw-polygon Tool for drawing polygon formed shapes
draw-polyline.png draw-polyline Tool for drawing polyline formed shapes
draw-rectangle.png draw-rectangle Tool for drawing rectangle shapes
draw-smudge.png draw-smudge Tool for smudging an area
draw-spiral Tool for drawing spirals
draw-star.png draw-star Tool for drawing star formed shapes
draw-text.png draw-text Tool for writing text on the canvas
draw-wave Tool for drawing a wave (e.g. a sinusoid)
edit-path Tool for editing paths (as opposed to creating them).
edit-chain To move/adjust boundries of a video clip chained to other clips (modifications alter more than one clip, ie. moving "out" point of video clip A moves "in" point of video clip B.
edit-free To freely move/adjust boundries of a single video clip
extract-foreground-objects.png extract-foreground-objects Tool for selection of objects in foreground
measure.png measure Tool for measuring angles and distances
page-magnifier.png page-magnifier Zoom in our out depending on mnemonics
select-by-color.png select-by-color For selecting areas of similar color
select-continuous-area.png select-continuous-area "Magic Wand" for selecting continuous pixel regions
select-ellipse.png select-ellipse For selecting ellipse area
select-invert Inverts current selection
select-lasso.png select-lasso For selecting hand-sketched regions
select-rectangular.png select-rectangular For selecting rectangular area
select-by-replacing-selection Select a region by replacing the previous selection
select-by-adding-to-selection Select a region by extending the previous selection
select-by-difference Select a region by removing part of the previous selection
select-by-intersection Select a region by leaving intersection of previous and new selections


Icon name Description
transform-crop-and-resize.png transform-crop-and-resize Crop or resize image/layer or trim a video clip. A medical scalpel
canvas-size Open a dialog to change size of canvas
color-management An icon mostly for for Preferences dialog
layer-to-image-size Shrink layer to image's size
print-size Open a dialog to chinga print size of the image, i.e. amount of dpi
scale-image Resize current image
transform-flip.png transform-flip Flip current item
transform-flip-horizontal Flip current item horizontally
transform-flip-vertical Flip current item vertically
transform-layer An option to affect layer in Move tool mode
transform-move.png transform-move Move current object
transform-path An option to affect path in Move tool mode
transform-perspective.png transform-perspective Arrange current item in perspective
transform-rotate.png transform-rotate Rotate current item
transform-rotate-90 Rotate current item 90 degress clockwise
transform-rotate-180 Rotate current item 180 degrees
transform-rotate-270 Rotate current item 270 degrees
transform-scale.png transform-scale Scale current item
transform-selection An option to affect selection in Move tool mode
transform-shear.png transform-shear Shear current item


Icon name Description
mode-rgb Image is in the RGB color mode
mode-cmyk Image is in the CMYK color mode
mode-lab Image is in the L*a*b color mode
mode-bw Image is in black and white
mode-indexed Image has an indexed color palette
layer-locked Layer is locked and can't be moved
layer-visible Layer is visible


Icon name Description
chain-locked Usually to display that ratio is kept
chain-unlocked Usually to display that ratio is not kept
edit-snap Toggle snapping (not necessarily to a "grid")
format-text-all-caps Toggle all caps
format-justify-forced Justify text so that the first and the last character reach borders of a frame
format-text-outline Outline text
format-text-reversed Reverse text
format-text-shadow Add/Remove shadow to/from text
format-text-small-caps Toggle small caps
format-text-subscript Make selected text a superscript
format-text-superscript Make selected text a superscript
format-text-strikethrough Strikethrough the text
format-text-underline-words-only Underline only words, not spaces between them
hidden Toggle icon, can be used for show visibility status of an object/layer
object-locked Selected object/layer is blocked from any changes
object-unlocked Selected object/layer can be changed
object-size-locked Size of selected object is blocked from changes
object-size-unlocked Size of selected object can be changed
show-baseline-grid Toggle visibility of baseline grid
show-grid Toggle visibility of page grid
show-guides Toggle visibility of guides
show-scrollbars Toggle visibility of scrollbars
show-navigation-window Show navigation window
show-rulers Toggle visibility of rulers
stroke-cap-butt Butt style of a stroke's cap
stroke-cap-round Round style of a stroke's cap
stroke-cap-square Square style of a stroke's cap
stroke-join-bevel Bevel style of a stroke's join
stroke-join-miter Miter style of a stroke's join
stroke-join-round Round style of a stroke's join
switch-foreground-and-background-colors Switch foreground and background colors
switch-to-foreground-and-background-defaults Switch foreground and background colors to their defaults (usually black and white respectively)
view-automation Toggle a mode where automation points are displayed to adjust effects over time
view-brushes Toggle visibility of Brushes palette
view-buffers Toggle visibility of Buffers palette
view-channels Toggle visibility of Channels palette
view-colormap Toggle visibility of Colormap palette
view-colors Toggle visibility of Colors palette
view-cursor Toggle visibility of Cursor palette
view-device-status Toggle visibility of Device Status palette
view-error-console Toggle visibility of error console
view-fonts Toggle visibility of Fonts palette
view-frames Toggle a mode where each video clip is displayed as a set of individual frame thumbnails
view-gradients Toggle visibility of Gradients palette
view-histogram Toggle visibility of Histogram palette
view-images Toggle visibility of Images palette
view-documents-history Toggle visibility of Documents History palette
view-labels Colorize video clips/objects according to labels
view-layers Toggle visibility of Layers palette
view-markers Display timeline markers (markers mark regions of time)
view-navigation Toggle visibility of Navigation palette
view-palettes Toggle visibility of Palettes palette
view-paths Toggle visibility of Paths palette
view-patterns Toggle visibility of Patterns palette
view-sample-points Toggle visibility of Sample Points palette
view-selection-editor Toggle visibility of Selection Editor palette
view-templates Toggle visibility of Templates palette
view-tool-options Toggle visibility of Tool Options palette
view-tools Toggle visibility of Tools palette
view-undo-history Toggle visibility of Undo History palette
visible Toggle icon, can be used for show visibility status of an object/layer


Hints are small "indicators" displayed over objects to inform the user what will happen as the result of the current operation (typically - user releases a mouse button during a D&D operation). They're displayed not on the object being manipulated, but over other objects that will be affected by the operation. This is primarely meant for video/timeline manipulating where moving one clip will adjust other clips.

Icon name Description
hint-insert-before The object held will be inserted before the object hinted. Hinted object will move right
hint-move-right The object hinted will be moved right
hint-move-left The object hinted will be moved left
hint-locked The object hinted is locked, and that's why the current operation can't be performed (nothing will happen)
hint-linked The object hinted is linked to the object being manipulated (or the object that will be manipulated). Operation will affect this clip as well.