< Calligra‎ | Icons
Revision as of 23:21, 19 September 2016 by Frinring (talk | contribs) (→‎Text editing icons [DONE-1])
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)


Legend: TODO, DONE, ??

Table related icons

all icons are available at https://share.kde.org/index.php/s/AJ0ELSIjLLfN3Iw for an better overview

Existing table icons in Breeze


The naming pattern for action icons (as I understand it):


"edit-" as prefix because content is changed. Then there are "format-" icons for changing the style of content. And state icons, though there is slight mix with action icons, as target state is also used with actions.

old name proposed name description state
[[1] adjustcol edit-table-column-resize-equal used for both equalize & adapt-to-content currently, should be split ?
[[2] adjustcol edit-table-column-resize-fit see above edit-table-column-resize-fit.png
[[3] adjustrow edit-table-row-resize-equal used for both equalize & adapt-to-content, should be split ?
[[4] adjustrow edit-table-row-resize-fit see above edit-table-row-resize-fit.png
[5] resizecol edit-table-column-resize ?
[6] resizerow edit-table-row-resize ?
[7] hide_table_column hide target state used with action, like "layer-visible-*" show and hide should work for that ?
[8] hide_table_row hide " ?
[9] show_table_column show " ?
[10] show_table_row show " ?
[11] cell_edit edit-table-cell used to start editing (text) content of cell, "edit" as action seems strange, just "edit-table-cell" also, better idea? edit-rename cause you rename the cell input ?
[12] cell_layout configure used to start formatting (content of) cell, see also tool_cellformatting. Or "format-table-cell"? ?
[13] insertcell edit-table-insert-cell used to insert single blank cell or multiple ones, incl. full row/column ?
[14] insertcellcopy edit-table-paste-cell for inserting cells from clipboard, moving existing ones to other positions ?
[15] mergecell edit-table-cell-merge seems existing icon is for same usecase ?
[16] mergecell-horizontal edit-table-cell-merge-horizontal used to merge all selected cells horizontal only ?
[17] mergecell-vertical edit-table-cell-merge-vertical used to merge all selected cells vertical only ?
[18] removecell edit-table-cell-delete used to remove a complete cell, resulting in other cells moving positions edit-table-cell-delete.png
[19] deletecell edit-table-cell-clear used to blank selected cells from all data and formatting ?
[20] delete_table edit-table-delete used to delete the whole table/spreadsheet ?
[21] dissociatecell use edit-table-cell-split ?
[22] selection edit-table-select-cell used both for selecting single cells and cell ranges, but single item in icon is standard? ?

Kexi has table icons, see below. Do they need different iconic language ?

  • Note (Jstaniek (talk) 07:23, 12 November 2015 (UTC)): Spreadsheets have sheets (strictly speaking); db tables are different especially when it comes to the meaning and behaviour of columns and rows. This of course does not have to be always reflected at the level of icons. Ideally we'd like to have the "Kexi table"-related actions here synced with the new table object's icon of Kexi [23].
  • Note Frinring (talk) 19:06, 13 November 2015 (UTC) I would like to see the "sheet" in "spreadsheet" not emphasized in icons, as spreadsheet-tables can be also embedded in rich-text documents or slides (as normal table), so the "sheet" would be misleading there.

Borders for multiple cells [DONE-1]

old name proposed name description state
[24] border_all format-border-set-all sets borders on all sides of all selected cells format-border-set-all.png
[25] border_inside format-border-set-internal sets borders only at sides of selected cells where neighbor is not selected format-border-set-internal.png
[26] border_outline format-border-set-external sets borders only at sides where both neighboring cells are selected format-border-set-external.png
[27] border_top format-border-set-top sets border only at the top side of the top selected cells format-border-set-top.png
[28] border_bottom format-border-set-bottom sets border only at the bottom side of the bottom selected cells format-border-set-bottom.png
[29] border_left format-border-set-left sets border only at the left side of the left selected cells format-border-set-left.png
[30] border_right format-border-set-right sets border only at the right side of the right selected cells format-border-set-right.png
[31] border_horizontal format-border-set-internal-horizontal like border_inside, but only horizontal sides format-border-set-internal-horizontal.png
[32] border_vertical format-border-set-internal-vertical like border_inside, but only verticalal sides format-border-set-internal-vertical.png
[33] border_remove format-border-set-none removes all borders on all sides of all selected cells format-border-set-none.png
[34] border_fall format-border-set-diagonal-tl-br sets diagonal line to all selected cells (topleft-bottomright) format-border-set-diagonal-tl-br.png
[35] border_up format-border-set-diagonal-bl-tr sets diagonal line to all selected cells (bottomleft-topright) format-border-set-diagonal-bl-tr.png
[36] borderpainter format-border-style??? TODO turns mouse to "painter" with current border settings, to format borders by clicking them format-border-style.png

Spreadsheet formatting icons [DONE-4]

old name proposed name description state
TODO - format-text-lowercase turns all chars lower-case format-text-lowercase.png
TODO - format-text-uppercase turns all chars upper-case format-text-uppercase.png
[37] first_letter_upper format-text-capitalize turns first letter of words uppercase format-text-capitalize.png
[38] vertical_text format-text-direction-vertical letters still horizontal, but lined in a column. not sure if format-text-direction-vertical is also for that? format-text-direction-vertical.png
[39] prec_minus format-precision-less to decrease precision of number format-precision-less.png
[40] prec_plus format-precision-more to increase precision of number %20format-precision-more.png
[41] text_top format-align-vertical-top needs text variant, blocks of align-vertical-top look strange format-align-vertical-top.png
[42] middle format-align-vertical-center " format-align-vertical-center.png
[43] text_bottom format-align-vertical-bottom " format-align-vertical-bottom.png
[44] comment edit-comment switches to edit the comment (creates one if there is none yet) edit-comment.png
[45] removecomment delete-comment delete delete-comment.png
[46] percent format-number-percent using a percent char as text does not work, because used as icon in menus format-number-percent.png
[47] money format-currency format-currency.png
[48] funct insert-math-expression "function" might be bound more to sourcecode insert-math-expression.png
[49] series insert-series?? TODO is "series" a term that makes sense outside spreadsheets? TODO
[50] multirow text-wrap?? TODO "Make the cell text wrap onto multiple lines" TODO

Path editing related icons [DONE]

Breeze has most icons here already. Though it uses the term "node" where "pathpoint" is used in Calligra. And segments (lines between neighbour nodes) are not mentioned at all in icon names. Not sure this can be kept, as 2 icons used refer to action on multiple selected nodes, filtered to those which are neighbours on the path. So for now the names proposed use the term "segment", for "format-segment-curve" and "format-segment-line". Ideas for node-only naming pattern welcome.

old name proposed name description state
[51] convert-to-path format-convert-to-path converts a shape into nodes-based path object format-convert-to-path.png
[52] pathpoint-curve format-node-curve makes node basepoint of curves format-node-curve.png
[53] pathpoint-line format-node-line makes node basepoint of lines format-node-line.png
[54] pathsegment-curve format-segment-curve makes only nodes of path segments basepoints of curves format-segment-curve.png
[55] pathsegment-line format-segment-line makes only nodes of path segments basepoints of lines format-segment-line.png
[56] pathpoint-insert format-insert-node not the same as format-add-node, node added on line in middle of two nodes, not appended format-insert-node.png
[57] pathpoint-remove format-remove-node format-remove-node.png
[58] pathpoint-join format-connect-node format-connect-node.png
[59] pathpoint-merge format-join-node format-join-node.png
[60] path-break-point format-break-node format-break-node.png
[61] path-break-segment format-disconnect-node format-disconnect-node.png
[62] pathpoint-corner format-node-corner path can enter and leave at different angles in both directions format-node-corner.png
[63] pathpoint-smooth format-node-smooth path needs to enter and leave at same angle in both directions format-node-smooth.png
[64] pathpoint-symmetric format-node-symmetric like smooth, but curve controls are equal in both directions format-node-symmetric.png

Connection line related icons

Escape directions [DONE]

Shapes can be connected with lines. The lines enter/leave the shapes on a certain side, ideally orthogonal to the surface. It can be controlled on which sides of a shape connection lines can enter/leave.

"escape-direction" is ODF lingo. Are there more common terms for this?

old name proposed name description state
[65] escape-direction-all escape-direction-all.png
[66] escape-direction-up escape-direction-up.png
[67] escape-direction-down escape-direction-down.png
[68] escape-direction-left escape-direction-left.png
[69] escape-direction-right escape-direction-right.png
[70] escape-direction-vertical escape-direction-vertical.png
[71] escape-direction-horizontal escape-direction-horizontal.png

Connection line types

old name proposed name description state
[72] lines-connector lines-connector lines-connector.png
[73] curve-connector curve-connector curve-connector.png
[74] standard-connector standard-connector standard-connector.png
[75] straight-connector straight-connector straight-connector.png

Animation related icons

Animation actions

old name proposed name description state
[76] with_previous animation-start-together used to set an animation to start with another/the one before in list ?
[77] after_previous animation-start-after used to set an animation to start after another/the one before in list ?
[78] onclick animation-start-on-click used to set an animation to start on activation by user (mouse click/touch on it) ?
[79] edit_animation edit-animation used to start editing parameters of an animation ?

Animation types

There is a set of preinstalled animations. User manually (not supported by UI) can add own animation definitions. Each animation is represented by a symbolic icon, either rendered on-the-fly by animation data (like path) or from prerendered icon fetched by iconname.

Animations are organized hierarchical in groups, with 1 or 2 levels, by type, and each group is shown with a symbolic icon as well.

Current top-level categories with pre-installed animations:

  • entrance animations - shape is not part of scene before, is part when animation is done
  • exit animations - shape is part of scene before, no longer part when animation is done
  • move animations - shape is part of scene before and after, possibly different location or parameters changed

There should be another category actually, at least for the "movie_credits_animation" animation:

  • passing animations - shape is not part of scene before and after

Second level: the type of motion and deformation, like zooming, flying, falling, etc.

Third level (for some): subtype with variants of parameters, like direction of flight, origin/target of move or speed.

Existing icons are done as expected for the first and second level, with one icon per type (some missing). Examples: "entrance_animations" for 1st level and "fly_in_animation" for 2nd level. There are some icons reused for 2nd-level types across 1st-level groups, like "zoom_animation".

For the 3rd level though icons are reused across the groups as created by the upper levels. They refer generically to the parameter variant, like "horizontal"/"vertical" or "in"/"out". Example: "horizontal_animations". Many icons missing.

Approach with parameter-type-style icons for subtypes/3rd level surely makes sense, using combination of 2 icons avoids explicit icons for any possible animation type. Possibly sometimes even existing action icons could be used here, as animation aspect is not needed in the 3rd-level icon itself.


Naming pattern "animation-1STLEVELTYPE-2NDLEVELTYPE", to make use of fallback to less specific icon names if present. Example: "animation-in-funkyfunky" would have "animation-in" as fallback. And "animation-color" would have "animation" as fallback. So no longer reusing icons across different 1st-level categories. That should allow to use the 2nd-level icon as single icon in lists of applied animations (assuming 3rd-level as detail to be ignorable iconically).

1st-level icons

old name proposed name description state
[80] entrance_animations animation-in shape enters the scene from outside and stays once done ?
[81] motion_path_animations animation-move shape moves by a given path ?
[82] exit_animations animation-out shape leaves the scene and is now longer present once done ?
[83] emphasis_animations animation-emphasis none preinstalled right now, shape possibly somehow highlighted ?
[84] custom_animations animation-other none preinstalled right now, "other" possibly better than "custom" ?

2nd-level type icons

old name proposed name description state
[85] appear_animation animation-in-appear instant appear ?
[86] bounce_animation - unused it seems ?
[87] collapse_animation animation-out-collapse ?
[88] disappear_animation animation-out-disappear instant disappear ?
[89] falling_in_animation animation-in-fall shaky-fly in ?
[90] fly_in_animation animation-in-fly ?
[91] fly_in_slow_animation animation-in-fly-slow 2 fly-in speeds predefined, thus another symbol needed ?
[92] fly_out_animation animation-out-fly ?
[93] crawl_out_animation animation-out-fly-slow ?
[94] spiral_in_animation animation-in-spiral ?
[95] spiral_out_animation animation-out-spiral ?
[96] stretchy_animation animation-in-stretch ?
[97] swish_animation animation-out-swish ?
[98] thread_animation animation-in-thread ?
[99] swivel_animation animation-in-swivel used for both in and out ?
[100] swivel_animation animation-out-swivel " ?
[101] flash_once_animation animation-in-flash used for both in and out ?
[102] flash_once_animation animation-out-flash " ?
[103] zoom_animation animation-in-zoom used for both in and out ?
[104] zoom_animation animation-out-zoom " ?
[105] movie_credits_animation animation-pass-movie-credits ?

Fallback icon for animations without matching icon

old name proposed name description state
[106] unrecognized_animation animation used as generic symbol icon for animation ?

3rd-level subtypes

old name proposed name description state
[107] horizontal_animations transform-move-horizontal not sure if "transform-move-" is good group ?
[108] vertical_animations transform-move-vertical " ?
[109] in_animations transform-move-in " ?
[110] out_animations transform-move-out " ?

Text editing icons [DONE-1]

old name proposed name description state
- - text-wrap TODO splits two text sections into two, uses "split" ATM text-wrap.png
[111] insert-pagebreak insert-page-break insert-page-break.png
[112] insert-tableofcontents insert-table-of-contents naming would match "view-table-of-contents" insert-table-of-contents.png

Presentation tool icons

The "pen" icon is also used for the cursor. Breeze cursor theme has a pencil . Qt::CursorShape has no pencil variant. How to check if there is a themed cursor variant (and how to get it), before setting own hardcoded icon? KCursor (QCursor subclass) of kdelibs4 was able to search by string for further themed cursors, but lost that in KF5 for unknown reason.

old name proposed name description state
[113] black pause-to-black-screen used to temporarily turn off the presentation, next to black screen also white screen one day ?
[114] highlight highlight-pointer-spot something about turning to mode where mouse is a spot, to highlight things on screen ?

Shape icons

  • inconsistent naming pattern
  • are objects, not actions (few are mimetype icons already), should be rather colored like file type/mimetype
  • those for fixed shape look (flower) should reflect look instead of being iconic
old name proposed name description state
[115] callout-shape draw-callout draw-callout.png
[116] circular-arrow-shape draw-circular-arrow draw-circular-arrow.png
[117] cross-shape draw-cross draw-cross-shape.png
[118] ellipse-shape draw-ellipse draw-ellipse-shape.png
[119] flower-shape draw-flower draw-flower-shape.png
[120] gearhead-shape draw-gearhead draw-gearhead-shape.png
[121] hexagon-shape draw-hexagon draw-hexagon-shape.png
[122] pentagon-shape draw-pentagon draw-pentagon-shape.png
[123] rectangle-shape draw-rectangle draw-rectangle-shape.png
[124] smiley-shape draw-smiley draw-smiley-shape.png
[125] spiral-shape draw-spiral draw-spiral-shape.png
[126] star-shape draw-star draw-star-shape.png
[127] pathshape draw-path draw-pathshape.png
[128] x-shape-connection ? ?
[129] x-shape-formula ? ?
[130] x-shape-image ? ?
[131] x-shape-text ? ?
- x-shape-text-artistic ? ?
- x-shape-vectorimage ? ?
- x-shape-3d ? ?
- x-shape-chart ? ?
[132] spreadsheetshape ? ?
- musicshape ? ?
[133] stateshape ? ?
- enhancedpath ? shape icon unused, because never fetched due to variants ?

"shape-choose" is used for action, is "shape" a proper term also useful for other apps using these icons?

Tool icons

A tool represents a specific mode of the application, where user input by mouse, keyboard etc. is interpreted for a certain aspect. Additionally the UI might highlight different aspects of the content. Examples: tool "Draw path", tool "Edit vector path", tool "Review". Tools can be offered in a toolbox (Karbon) or by tabs in the sidebar. Each tool is represented by an icon.

  • inconsistent naming here
  • possibly should be all named as action icons, "edit-" or is "tool-" better here?
  • some inconsistent naming in breeze icons, "tools" vs "tool"

Current Breeze icons for drawing tools look too similar on small sizes, as the toolbox.

old name proposed name description state
[134] tool_cellformatting table see also discussion of table icons done
- tool_comment edit-comment not sure where it shows up in UI ?
[135] tool_imageeffects edit-image-filter ? edits effect filters applied on vector shapes ?
[136] tool_pagelayout edit-page-layout ? ?
[137] tool_references edit-references ? to manipulate footnotes, endnotes, internal links, external links, cites ?
[138] tool_review edit-review done
[139] tool-text edit-text done
[140] backgroundtool configure for pages, slides, and other canvas types ?
[141] artistictext-tool edit-text ? artistic text has a different tool to the one for normal text frames ?
[142] statetool edit-state ? specific tool for "state" shape (mainly Braindump) ?
[143] animation-stage tool-animator ?
[144] select tool-pointer 'tool-pointer' exists already in breeze. done
[145] hand transform-move would match "zoom", but perhaps "view-move" better? ?
[146] createpath draw-path or rename tool-draw-path ? done
[147] editpath edit-node not just a single node edited, so not sure "edit-node" matches, edit-path is needed for draw path done
[148] calligraphy draw-calligraphic ? or rename tool-calligraphy ? ?
[149] gradient color-gradient done
[150] pattern color-pattern ?

Other tool icons, used from Breeze iconset:


Other icons [DONE-2]

old name proposed name description state
[151] zoom-pixels zoom-pixels zoom so one pixel is shown as one pixel of display ?
[152] special_paste edit-paste-custom pastes with user interaction for configuring ?
[153] snap-boundingbox snap-bounding-box misses from snap-* icons in Breeze/Oxygen added
[154] artistictext-attach-path text-put-on-path action to select a path to use as baseline, currently not in UI, but done by double-click done
[155] artistictext-detach-path text-remove-from-path action to disconnect text from path currently used as baseline done


(this section also contains libraries that are used by Kexi)

Kexi General Actions

old name proposed name description state
[156] form_action form-action An "execution" symbol for action that can be assigned to a form widget, e.g. button. The symbol is present in Breeze's [form-view-action so could be reused.
[157] widgets Symbolizes set of widgets / a tree of widgets / form structure
[158] state_data data-view Symbolizes "data" view of a window. Other views are "design" and "SQL".
[159] state_edit design-view Symbolizes "design" view of a window. Other views are "data" and "SQL". "application-x-designer" icons can be a good base. Or this (from MSA): oZPstjj.png
[160] state_sql sql-view Symbolizes "SQL" view of a window. Other views are "data" and "design".

Kexi Form Widgets

Kexi has a Form Design toolbar with widget icons used for forms development. Kexi 3 will switch to a toolbox view like the Apple's one. A list view with description is also possible [161] - good for novice users. Therefore the idea is to have somewhat WYSIWYG look for the widget icons. But still without unnecessary details.

old name proposed name description state
[162] autofield Low priority UNUSED for now
[163] button
[164] check checkbox Can be based on Breeze's 'checkbox', maybe even identical? LO Breeze checkbox icon looks like a frame. DONE
[165] combo combobox Breeze's combobox for LO is not the best, it's too similar to other icons.
[166] dateedit A box with "2015-11" could fit here.
[167] datetimeedit A box with "2015 01:23" could fit here. 16px version is a challenge.
[168] frame
[169] groupbox
[170] pixmaplabel imagebox Image box able to present a single static image. Breeze's 16/22px "place" icon "folder-images" fits here. DONE
[171] label Definitely let's not use label-amarok, Just "Label" text is preferred
[172] lineedit
[173] line_horizontal line-horizontal A line (visual separator) DONE
[174] line_vertical line-vertical A line (visual separator) DONE
[175] listbox Low priority UNUSED for now
[176] listwidget Low priority UNUSED for now
[177] multiple_obj multiple-objects Symbolizes multi-selection of objects. Breeze's "edit-select-all" fits quite well.
[178] progress progressbar
[179] radio radiobutton UNUSED for now
[180] slider Breeze's "games-config-options" is a good base for it.
[181] spin spinbox
[182] tabwidget Could be based on Breeze's "tab-new", just without the "+"
[183] tabwidget_tab tabwidget-tab A single tab widget's tab. Could be based on Breeze's "tab-new", just without the "+".
[184] textedit A multiline text box widget. Breeze's 16/22px "place" icon "folder-text" fits here.
[185] timeedit A box with "01:23" could fit here.
[186] unknown_widget unknown-widget Symbolizes unrecognized/unknown/unavailable/broken widget type

Kexi Table Actions

old name proposed name description state
[187] add_field add-field "Add database field", look at Breeze's text-field
[188] autonumber "Autonumbering database records (rows)"
[189] clear_table_contents edit-table-clear Uses Kexi's "table" icon as a base V44AO3N.png
[190] delete_table_row edit-table-delete-row Uses Kexi's "table" icon as a base and "row delete" symbol from Breeze. 4LQX6lY.png
[191] insert_table_row edit-table-insert-row Uses Kexi's "table" icon as a base and "row insert" symbol from Breeze. VxRhjS1.png
[192] key database-key "Database Primary Key", it's not related to keyboard or locking DONE
[193] relation "Relation between database tables", in MSA: qerjsis.png OFsceYR.png

Kexi Query Actions

old name proposed name description state
[194] test_it validate Checks validity of a query. Breeze's "checkbox" can be useful base. V8CqtHd.png

Kexi Format Actions

old name proposed name description state
[195] aopos2grid align-grid "Align Widgets Position To Grid", low priority, not used in Kexi for now
[196] aofit fit-contents "Adjust Widgets Size To Fit Contents", low priority, not used in Kexi for now
[197] aogrid fit-grid "Adjust Widgets Size To Grid", low priority, not used in Kexi for now
[198] aonarrowest fit-narrowest "Adjust Widgets Widths To Narrowest Selected", low priority, not used in Kexi for now
[199] aoshortest fit-shortest "Adjust Widgets Heights To Shortest Selected", low priority, not used in Kexi for now
[200] aotallest fit-tallest "Adjust Widgets Heights To Tallest Selected", low priority, not used in Kexi for now
[201] aowidest fit-widest "Adjust Widgets Widths To Widest Selected", low priority, not used in Kexi for now

KDb lib

See KDb for info about this component.


KProperty lib

See KProperty for info about this component.

  • TODO: button_no has been moved from Kexi here and is used to show "No" value, it's actuqally a 'minus' sign, see the Fill Background property at http://i.imgur.com/ES2BSbt.png.

KReport lib

See KReport for info about this component.

Many icons for KReport are already DONE.



This page was last edited on 19 September 2016, at 23:21. Content is available under Creative Commons License SA 4.0 unless otherwise noted.