Icons

The collection of icons currently available in Design Language should be used as intended. Please read the notes on use of each size and avoid using icons as illustrations over 64px. If you need a new icon, please follow the guidelines provided to ensure they fit our global style, and share it with us to include here.

Available icons

Use the drop down selectors to switch between size and colour classes available for icons. You can also click on an icon to reveal its class name and to copy the text.

Breed

  • attention
  • cat tree
  • children
  • deafness
  • enjoys training
  • exercise
  • experience
  • family
  • first time
  • friendly
  • grooming
  • guard dog
  • heat
  • human interaction
  • hunt
  • incompatible
  • indoor outdoor
  • indoors
  • low maintenance
  • need space
  • no alone
  • no garden
  • outdoor
  • pairs
  • patient
  • quiet home
  • sm home
  • sporting
  • startled
  • training
  • versatile
  • watchdog

Breed

Breed

Brand

  • bag
  • basket
  • cart
  • food
  • food2
  • groomer
  • health
  • home
  • knowledge
  • nutritional
  • pharmacy
  • sustainable
  • vet
  • weight

User Interface General

  • actions
  • address
  • advice
  • arrow
  • attachment
  • bookmark
  • calendar
  • clock
  • close
  • comment
  • computer
  • documents
  • down
  • edit
  • email
  • external
  • female
  • filter
  • forward
  • help
  • hide
  • image
  • info
  • left
  • like
  • loading
  • location
  • location2
  • lock
  • male
  • menu
  • minus
  • mobile
  • mouse
  • news
  • pdf
  • pin
  • plus
  • print
  • quality
  • rate fill
  • rate
  • refresh
  • right
  • rss
  • search
  • settings
  • share
  • shelter
  • shop
  • show
  • tablet
  • text decrease
  • text increase
  • unlock
  • up
  • user add
  • user
  • video

User Interface Video

  • back
  • collapse
  • expand
  • fast forward
  • pause
  • play
  • rewind
  • skip
  • stop
  • volume off
  • volume on

Brand

Brand

User Interface General

User Interface General

User Interface Video

Colour usage

A specific ‘Iconography’ colour has been set to ensure a difference in baseline colour between text and icons. Although not immediately noticeable to the eye, this allows a slight visual separation between text and icons for users. When coloured in ‘Iconography’ they need to be sat on a ‘Brand3’ or ‘Brand4’ colour only. Our iconography can be used in 4 different colour combinations. These are the only way these icons can be coloured, icons are not allowed to be filled and need to always retain their keyline style. Iconography can sit on backgrounds of ‘Brand1’ and ‘Brand2’ with a ‘Brand3’ stroke colour. They can also have their strokes coloured in ‘Brand1’ or ‘Iconography’ when sat on a ‘Brand3’ or ‘Brand4’ colour.

Hover and active state

If iconography is used as part of a hyperlink or other clickable functionality they will require a hover state. Hovers for iconography coloured in the default ‘Iconography’ colour should transition to ‘Brand1’. ‘Iconography’ can also be transitioned to ‘Brand1’ when toggling iconography such as an active dropdown arrow or hamburger/close button that is clicked/pressed by a user. View icon buttons

Creating Icons

All Royal Canin Iconography is equal in look and feel and icons work on their own or as part of a larger set. It is suggested that any new icons that are created follow the following rules that were established when creating the original bank of icons available and that the provided grid file is used when creating icons. These steps enable Royal Canin to have a consistent icon library now and for the future. Adobe Illustrator is the required software for creating new icons and for comptability with the grid, this is due to the ability to have more flexibility over how SVG (Scalable Vector Graphic) versions of the icons are exported out and how they are prepared for developors, when used in the digital space.

Download Icon Kit
  • 1. Download the grid and setup

    In Illustrator it is important to enable pixel preview (View > Pixel Preview) and to snap all elements to the pixel grid (View > Snap to pixel grid). This is to assist in creating pixel perfect icons which aren’t blurred due to subpixel rendering and avoids blurring of iconography on resize.

  • 2. Outer Rulers and Clearance

    Using the provided icon grid file there are two layers of grid. The grid shown here gives us an outer area of 32x32; the recommended size for icon creation.

  • 3. Inner Rulers

    The grid shown here gives us an inner area of 32x22; this is for use with icons that proportionally may not work as a full square in dimensions such as a close button or hamburger menu icon but can also be used as an additional guide to make 32x32 icons more consistent in their positioning.

  • 4. Outer Rulers

    This 32x32 area is the maximum size to which icons can be created, this enables us to double or even triple icons in size if required to 64x64 or 128x128, In some circumstances icons can also be halfed to 16x16 but may require some reduction in detail to work.

  • 5. Drawing paths on the grid

    Note that when paths are drawn, they are drawn 1px inside of the actual boundaries of the grid. This is for when stroke widths are added in the next step(6) these strokes will add up to the additional space we have left around the edges of the boundary.

  • 6. Stroke properties

    Icons are created with a keyline style, using a 2px stroke weight and with rounded caps and rounded joins enabled which, reflect the rounded nature of the current Royal Canin brand. Solid fills of colour need to be avoided on icons where possible. As displayed the 1px stroke that sites either side of the path now sits flush to our 32x32 boundary.

  • 7. Rounded corners

    Though rounded caps and rounded joins enable us to get some roundedness initially, corners also benefit from the addition of a specific 2px radius. In some cases, where roundedness is required but the size may depict that 2px is too great, 1px radius may be used. (The ‘Home’ icon for example has 2px radius around the building itself, but for the smaller windows, 1px radius is used instead).

  • 8. Expanding strokes and exporting

    When icons are completed, it is recommended to keep a copy of the icon in its current state and then duplicate the icon before continuing. Once icons are complete, the strokes need to be expanded. This is because some browsers struggle to display stroke widths correctly, especially when icons are resized. Icons should be exported from illustrator as SVGs (Scalable Vector Graphics).

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 13th September 2018 [ui_assets/brand_identity/icons.yml]
    Spelling and grammar corrections
  • 25th July 2018 [ui_assets/brand_identity/icons.yml]
    prefix styled-link
  • 12th July 2018 [ui_assets/brand_identity/icons.yml]
    Fix typo in header list item.
  • 9th May 2018 [ui_assets/brand_identity/icons.yml]
    add class in to icons.yaml pass through to icons.twig template
  • 20th April 2018 [ui_assets/brand_identity/icons.yml]
    Update link to icon file on icon page.
  • 19th February 2018 [ui_assets/brand_identity/icons.yml]
    Convert all multi line text to use
  • 5th February 2018 [ui_assets/brand_identity/icons.yml]
    Removed extra full stops
  • 5th February 2018 [ui_assets/brand_identity/icons.yml]
    Added link to icons page to buttons, minor copy updates
  • 1st February 2018 [ui_assets/brand_identity/icons.yml]
    Updated button classes
  • 1st February 2018 [ui_assets/brand_identity/icons.yml]
    Updated icon page copy
  • 18th December 2017 [ui_assets/brand_identity/icons.yml]
    Added 24px icons
  • 15th December 2017 [ui_assets/brand_identity/icons.yml]
    Renamed files for consistency, organised get started section into folders, regen all html
  • 1st December 2017 [ui_assets/brand_identity/icons.yml]
    Restructured folder order.
  • 13th November 2017 [ui_assets/brand_identity/icons.yml]
    Added paragraph twig filter and removed p tags from YAML
  • 26th October 2017 [ui_assets/brand_identity/icons.yml]
    Removed "web" from icon intro paragraph, updated instance of small icon to new asset
  • 26th October 2017 [ui_assets/brand_identity/icons.yml]
    Added new icon page copy and dropdown filter
  • 12th October 2017 [ui_assets/brand_identity/icons.yml]
    Added CTA download button for icon kit
  • 9th October 2017 [ui_assets/brand_identity/icons.yml]
    Added tooltip to icons
  • 30th August 2017 [ui_assets/brand_identity/icons.yml]
    Added content for icon page.
  • 30th August 2017 [ui_assets/brand_identity/icons.yml]
    Update portal to use latest assets 1.3.3.
  • 19th July 2017 [ui_assets/brand_identity/icons.yml]
    Added footer configuration to the page that need configuration. This will work on any page, but to keep things cleaner I've not added it to them. Added only child logic to footer widgets so we don't ever have a matching content/footer items.
  • 19th July 2017 [ui_assets/brand_identity/icons.yml]
    Added associated files to page config for use with git info collection.
  • 19th July 2017 [ui_assets/brand_identity/icons.yml]
    Replaced any instance of 'web design language' with 'design language'.
  • 15th July 2017 [ui_assets/brand_identity/icons.yml]
    Added Git change log integration. Added dynamic icon variant controls for portal.