LIVE

Icon

usage guidelines

Icons serve as visual representations of objects, concepts, actions, etc. They help enhance the overall UI design by providing recognizable symbols with easily identifiable meanings, even among different cultures and languages. Last but not least, icon designs themselves shouldn't get too complex, otherwise, they won't scale well on smaller resolution devices and risk looking messy when viewed through varying screen sizes/resolutions. Also, please keep consistent line thickness strokes throughout the whole icon family, avoiding sudden changes.

Intuitive and Recognizable Design

Icons should be simple, clear, and universally recognizable, conveying their intended function or meaning at a glance.

Consistent Style and Sizing

Maintain a consistent style, size, and color palette for all icons to ensure visual harmony and brand consistency across the interface.

Accessible with Textual Support

Accompany icons with alt text or tooltips for screen reader accessibility, and consider adding labels for clarity, especially when the icon's purpose isn't immediately obvious.

accessibility standards

Icons serve as visual representations of objects, concepts, actions, etc. They help enhance the overall UI design by providing recognizable symbols with easily identifiable meanings, even among different cultures and languages. Last but not least, icon designs themselves shouldn't get too complex, otherwise, they won't scale well on smaller resolution devices and risk looking messy when viewed through varying screen sizes/resolutions. Also, please keep consistent line thickness strokes throughout the whole icon family, avoiding sudden changes.

content standards

Icons serve as visual representations of objects, concepts, actions, etc. They help enhance the overall UI design by providing recognizable symbols with easily identifiable meanings, even among different cultures and languages. Last but not least, icon designs themselves shouldn't get too complex, otherwise, they won't scale well on smaller resolution devices and risk looking messy when viewed through varying screen sizes/resolutions. Also, please keep consistent line thickness strokes throughout the whole icon family, avoiding sudden changes.

interaction and animation

Icons serve as visual representations of objects, concepts, actions, etc. They help enhance the overall UI design by providing recognizable symbols with easily identifiable meanings, even among different cultures and languages. Last but not least, icon designs themselves shouldn't get too complex, otherwise, they won't scale well on smaller resolution devices and risk looking messy when viewed through varying screen sizes/resolutions. Also, please keep consistent line thickness strokes throughout the whole icon family, avoiding sudden changes.

CODE

export const ToastNotification = () => {
  return (
    <StyledToastNotification>
      <div className="rectangle" />
      <div className="frame">
        <div className="frame-wrapper">
          <div className="div">
            <Icon
              className="icon-instance"
              icon={<FilledYesSize20 className="attributes-instance" color="#FF5900" />}
            />
            <div className="text-wrapper">BEEPBOOP</div>
          </div>
        </div>
      </div>
      <div className="icon-wrapper">
        <Icon className="icon-instance" icon={<FilledNoSize12 className="attributes-instance" color="#FF5900" />} />
      </div>
    </StyledToastNotification>
  );
};

CODESANDBOX

ZILKR DESIGN SYSTEM

© 2024 — ZILKR
All rights reserved

ZILKR DESIGN SYSTEM

© 2024 — ZILKR
All rights reserved

ZILKR DESIGN SYSTEM

© 2024 — ZILKR
All rights reserved