Designing Teneo Icons: A Minimalist Iconography Case Study

How to Use Teneo Icons in Your Web Projects Integrating official Teneo Protocol assets ensures your web projects remain visually consistent with the ecosystem’s decentralized AI branding. Whether you are building an interface for a community node or a custom dashboard, official Teneo Brand Guidelines provide high-quality vector and raster assets to get started. 1. Access the Teneo Media Room

The Teneo Media Room is the primary source for official design assets. You can download the Brand Media Kit, which includes: Logos and Symbolmarks: Full-color and monochrome versions.

File Formats: High-resolution SVG, PNG, and EPS files for both web and print use.

Brand Guidelines: A PDF detailing logo usage rules, official color palettes, and typography. 2. Implementation Methods

Depending on your project’s needs, there are several ways to implement these icons:

SVG Integration (Recommended): Use the SVG files from the media kit for maximum scalability without quality loss. SVGs can be embedded directly in your HTML or used as background-image in CSS.

Teneo Web Widget: If you are building a conversational AI interface, the Teneo Web Widget 2.0 is designed to be highly extensible. It allows you to customize colors and icons to align with your brand standards.

Custom React Components: For React-based projects, you can import SVGs as components to easily manipulate their properties (like fill or stroke) via props. 3. Best Practices for Usage

To maintain a professional look, follow these standard design principles:

Maintain Clear Space: Always respect the “clear space” rules outlined in the Teneo Brand Guidelines to ensure the logo or symbolmark remains legible and prominent.

Color Consistency: Only use the official color variations provided in the media kit (typically full-color for light/dark backgrounds and monochrome for specific UI states).

Avoid Distortion: Never stretch or alter the aspect ratio of Teneo icons.

For developers building deeply integrated tools, the Teneo CLI and Client SDK can also be used to connect your product directly to the decentralized network of AI agents. Using Icons in Web Development – OpenReplay Blog