Design/Icon Themes

    From The Document Foundation Wiki

    TDF LibreOffice Document Liberation Project Community Blogs Weblate Nextcloud Redmine Ask LibreOffice Donate

    Naming convention for icons

    Work-in-progress started by ace_dent. Please get involved!

    We need to update and standardize Icon Themes. Here is just some preliminary thoughts to kickstart the process.


    1. Icons will be named following the Freedesktop naming standard where possible.
    2. The name of an image should uniquely convey its purpose, making it easy to locate to avoid duplication and promote standardisation. Names should be in human readable form, i.e. not require further referencing.
    3. It shall be assumed that American English (en_US) is an acceptable international language, hence the allowable text characters must fall within the US-ASCII character set. As a further restriction, all icon names may only contain the following characters: lower-case letters (“a”-“z”), numbers (“0”-“9”), underscore (“_”), dash (“-”), or period (“.”). The use of lower-case letters is principally to ensure thoughtful naming, e.g. instead of 'OpenReadOnly' we have 'open-readonly'. Image names are to be spelled according to the en_US dictionary, with abbreviations avoided and common words preferred for the benefit of non-native speakers.
    4. Images should be named to describe function rather than form (which may vary by Theme), avoiding names that may conflict with localization.
    5. The dash “-” character is used to denote hierarchies and links between images, essentially grouping them when listed alphanumerically. For instance, the generic folder icon is simply “folder”, and “folder-open” specifies an open folder. However, if the more specific item does not exist in the current theme, it gives some indication as to a suitable generic image to keep consistent style.


    Structure of icon themes

    We will determine a new structure as described here.


    Overview

    The directories of the image archive (“images.zip”) should generally follow the discussed naming conventions. However, when storing large numbers of images in a zip archive, there is an additional overhead for each directory, so shorter names of less than 6 letters are preferred.

    The directory structure should be flat rather than deep. In addition to reducing overheads of the .zip archive, it enables the User to locate images with greater ease. The main feature of the directory structure is an easy to locate common 'action' directory, which stores any image required by more than one OOo application (c.f. “//res/commandimagelist/”). This gathers the core OOo images, which will assist creation of Themes, reduce duplication and provide Developers with a central repository.


    We need to consider how to best handle localization ...

    Localized images are currently stored within the same directory as the default image, (i.e. “/sc_bold.png” and “/zh-CN/sc_bold.png”). A different scheme will be adopted, to collate all localized resources to assist in their management. The high level directory “//locale/” will store localized images, with each locale stored in sub-directores according to ISO code and naming guide (e.g. “//locale/zh-cn/”). Within each locale directory, the sub-directory structure will then be identical to that of the highest directory structure, with directories only existing when they contain a localized image (e.g. “//locale/zh-cn/action/”).


    Top level directories

    Action

    Overview: Icons which are generally used in menus and dialogs for interacting with the user [1].

    Directory: Most icons will fall under the 'action' category. Therefore we drop the directory prefix, to save overheads and all icons will be stored in the top level of the Images directory.

    List of icons:

    Name Current icons Image description / Metaphor / Action
    document-save

    res/lc05505.png

    res/sc05505.png

    res/commandimagelist/lc_save.png

    res/commandimagelist/sc_save.png

    		The icon for the save action. Often depicted as a Floppy disk. Freedesktop suggests it should be an arrow pointing down and toward a hard disk. Images of hardware quickly become irrelevant and more general abstractions are preferred.
    document-save-as

    res/sc05502.png

    res/commandimagelist/sc_saveas.png

    res/commandimagelist/lc_saveas.png

    svx/res/id03.png

    		The icon for the save as action. See notes for document-save.
    edit-find res/lc05961.png

    res/lc10853.png

    res/sc05961.png

    res/sc10853.png

    res/commandimagelist/lc_helpsearch.png

    res/commandimagelist/lc_recsearch.png

    res/commandimagelist/lc_searchdialog.png

    res/commandimagelist/sc_helpsearch.png

    res/commandimagelist/sc_recsearch.png

    res/commandimagelist/sc_searchdialog.png

    		The icon for the find action. Often shown as binoculars to represent searching.
    format-text-bold

    res/commandimagelist/lc_bold.png

    res/commandimagelist/sc_bold.png

    starmath/res/at21717.png (24x24)

    Format text with a Bold typeface. Normally a capital 'B'.

    L10n: May vary by locale.

    format-text-italic

    res/commandimagelist/lc_italic.png

    res/commandimagelist/sc_italic.png

    starmath/res/at21718.png (24x24)

    Format text with an Italic typeface. Normally a capital 'I'.

    L10n: May vary by locale.

    format-text-outline

    (ArtLibreSet)

    res/commandimagelist/lc_outlinefont.png

    res/commandimagelist/sc_outlinefont.png

    Format text in an Outline style. Normally a capital 'O'.

    L10n: May vary by locale.

    format-text-shadow

    (ArtLibreSet)

    res/commandimagelist/lc_shadowed.png

    res/commandimagelist/sc_shadowed.png

    Format text with a shadow style. Normally a capital 'A' with shadow effect.

    L10n: May vary by locale.

    format-text-strikethrough
    format-text-underline


    Animations

    Overview: Animated images used to represent loading web sites, or other background processing which may be less suited to more verbose progress reporting in the user interface [1].

    Directory: animations.

    Resources:


    Applications

    Overview: Icons that describe what an application is, for use in the Programs menu, window decorations, and the task list. These may or may not be generic depending on the application and its purpose. Applications which are to be considered part of the base desktop, such as the calculator or terminal, should use the generic icons specified in this specification, while more advanced applications such as web browsers and office applications should use branded icons which still give the user an idea of what function the application provides [1].

    Directory: apps.

    Resources:


    Categories

    Overview: Icons that are used for categories in the Programs menu, or the Control Center, for separating applications, preferences, and settings for display to the user [1].

    Directory: categories

    Resources:


    Devices

    Overview: Icons for hardware that is contained within or connected to the computing device [1].

    Directory: devices.

    Resources:

    Emblems

    Overview: Icons for tags and properties of files, that are displayed in the file manager. This context contains emblems for such things as “read-only” or “photos” [1].

    Directory: emblems.

    Resources:


    MimeTypes

    Overview: Icons for different types of data, such as audio or image files [1].

    Directory: mimetypes.

    Resources:


    Places

    Overview: Icons used to represent locations, either on the local filesystem, or through remote connections. Folders, trash, and workgroups are some examples [1].

    Directory: places.

    List of icons:

    Name Current icons Image description / Metaphor / Action
    folder res/dir-clos.png

    res/fileopen.png

    res/foldercl.png

    res/lx03141.png (32x32)

    res/lx03189.png (32x32)

    res/newdoc.png

    res/sx03141.png

    res/sx03189.png

    res/commandimagelist/sc_closedocs.png

    res/commandimagelist/lc_closedoc.png

    res/commandimagelist/lc_closedocs.png

    sc/res/fapclose.png

    sfx2/res/ln02.png (32x32)

    sfx2/res/ln03.png (32x32)

    sfx2/res/ln04.png (32x32)

    sfx2/res/ln05.png (32x32)

    sfx2/res/ln0107.png (32x32)

    svtools/res/folder.png

    		The standard folder icon used to represent directories on local filesystems, mail folders, and other hierarchical groups.

    Status

    Overview: Icons for presenting status to the user. This context contains icons for warning and error dialogs, as well as for the current weather, appointment alarms, and battery status [1].

    Directory: status.

    List of icons:

    Name Current icons Image description / Metaphor / Action
    image-missing

    res/grafikde.png

    res/grafikei.png

    sw/res/x.png

    		The icon used when an image could not be loaded, either because it is missing or broken.

    References and further info

    http://wiki.koffice.org/index.php?title=Icons/KOffice_wide_icons

    http://techbase.kde.org/Projects/Oxygen/namingSpec

    1. ↑ http://standards.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html
    Retrieved from "https://wiki.documentfoundation.org/index.php?title=Design/Icon_Themes&oldid=239088"