import type { CSSProperties } from "react";
import React from "react";
import type { IconColorNames, IconNames, IconSizes } from "@jobber/design";
export type { IconColorNames, IconNames } from "@jobber/design";
export interface IconProps {
    /** The icon to show.  */
    readonly name: IconNames;
    /**
     * Changes the size to small or large.
     * @default base
     */
    readonly size?: IconSizes;
    /**
     * Determines the color of the icon. Some icons have a default system colour
     * like quotes, jobs, and invoices. Others that doesn't have a system colour
     * falls back to greyBlueDark.
     */
    readonly color?: IconColorNames;
    /**
     * Sets a custom color for the icon. Can be a rgb() or hex value.
     */
    readonly customColor?: string;
    /**
     * Used to locate this view in end-to-end tests
     */
    readonly testID?: string;
    /**
     * **Use at your own risk:** Custom classnames for specific elements. This should only be used as a
     * **last resort**. Using this may result in unexpected side effects.
     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
     */
    readonly UNSAFE_className?: {
        svg?: string;
        path?: string;
    };
    /**
     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
     * **last resort**. Using this may result in unexpected side effects.
     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
     */
    readonly UNSAFE_style?: {
        svg?: CSSProperties;
        path?: CSSProperties;
    };
}
export declare function Icon({ name, color, customColor, size, testID, UNSAFE_className, UNSAFE_style, }: IconProps): React.JSX.Element;