Icons

Official collection of icons to promote a consistent experience across the ShareGate ecosystem. All icons are available in two ways, React components and static files.

Orbit

Major icons

Major icons are 16x16 in a 20x20 bounding box. Use them to draw attention to an area.

Minor icons

Minor icons are 12x12 in a 20x20 bounding box. Use them to prevent an icon from taking too much the center stage in a component.

Design specifications

All official SVG icons are available as major icons. Some icons have a minor version to avoid overpowering more important elements in a component.

Icon dimensions

All icons are available as 20x20 SVGs. They should not be resized as they have been crafted to look their best in this particular size.

Major

All icons are provided as Major icons, which serve as the primary variation of the icon and are suitable for the majority of usage scenarios.

Minor

To keep your icon from taking up too much space compared to text or other elements surrounding it, use a smaller version of the icon. The overall icon size remains the same 20x20, but the icon within the component is reduced in size. If a minor version of an icon is not available in Orbit and you need one, please request it by submitting an issue on Github.

Usage

import { CalendarMajorIcon } from "@sharegate/orbit-ui";

function render() {
    return <CalendarMajorIcon aria-label="Calendar" />
}

Static files

Icons SVG files are available from the root of @orbit-ui/icons package. These files are useful for non React apps or any use cases which cannot be done using a component. Whenever you can, you should prefer React components to static files.

Orbit Design provide icons with default dimensions, e.g. a 20px variant will have a default viewport of 20x20 and a viewbox of 0 0 20 20.

Although frowned upon, you can customize an icon dimensions with the width and height props of Orbit styled-system.

Image source

import CalendarMajorIcon from "@orbit-ui/icons/icon-calendar-major.svg";

function render() {
    return <Img src={CalendarMajorIcon24} alt="Calendar" width={6} height={6} />
}

Color

An SVG object get it's color from the fill attribute. When an SVG object doesn't define a fill attribute on his elements, CSS can be use to style the internal color of the elements of the objects with the fill property.

This means you can alter the color of an icon by specifying a new fill value. If the SVG already contains a fill attribute, please fill an issue.

React components

To set the color of an icon component, you can set the fill prop of Orbit styled-system.

import { CalendarMajorIcon } from "@sharegate/orbit-ui";

function render() {
    return <CalendarMajorIcon aria-label="Calendar" fill="purple-8" />
}

Image source

To set the color of an image, you can set the fill prop of Orbit styled-system.

import CalendarMajorIcon from "@orbit-ui/icons/icon-calendar-major.svg";

function render() {
    return <Img src={CalendarMajorIcon} alt="calendar" fill="purple-8" />
}