import { HTMLAttributes, SVGAttributes } from 'react';
import { FontSize, SxColor } from '../../tokens';
import type { ValueOrArray } from '../../types';
export declare type BaseProps = {
    /** Size of the icon. Defaults to `16px`. */
    size?: ValueOrArray<keyof typeof FontSize | '8px' | null>;
    /** Color of the icon. Defaults to `currentColor`. */
    color?: ValueOrArray<SxColor | null>;
    /** Custom `viewBox` for the inner SVG. Defaults to `0 0 16 16`. */
    viewBox?: SVGAttributes<SVGElement>['viewBox'];
} & Omit<HTMLAttributes<HTMLElement>, 'color'>;
export declare type BaseIconProps = BaseProps & {
    /** Alternative text that describes the icon to people using screen readers. */
    title: string;
    /** Direction the icon is pointing in, if it’s an arrow or something like that. */
    direction?: 'right' | 'down' | 'left' | 'up';
};
export declare type IconProps = Omit<BaseProps, 'viewBox' | 'children'> & {
    /** Alternative text that describes the icon to people using screen readers. */
    title?: string;
};
