Accessible Duotone Icon for Angular

HTML Angular React Vue

<svg [cIcon]="icons.cidAccessible"></svg>

Check how to use CoreUI Icons in your project

Get this PRO icon

Browse All Icons

About

The accessible duotone icon indicates barrier-free and inclusive features in Angular applications. Use this icon to mark accessible content, alternative formats, or features designed for users with disabilities. Perfect for documentation sites, public services, and any Angular application committed to digital inclusion.

The duotone style ensures clear communication of accessibility status across all screen sizes and devices in your Angular application.

Common Use Cases

Accessible Content Badge

Mark screen-reader-friendly content in Angular applications

Alternative Formats

Indicate availability of accessible formats in Angular apps

Barrier-Free Features

Highlight inclusive design features in Angular interfaces

Best Practices

Ensure icon itself meets accessibility standards
Provide text alternatives alongside icons
Test with actual assistive technologies

Installation

To start using CoreUI Angular Icons in your project, you need to install it as a dependency. Follow the instructions below based on your package manager of choice:

Using npm

npm install @coreui/icons-pro @coreui/icons-angular

Using yarn

yarn add @coreui/icons-pro @coreui/icons-angular

Usage

Once you have the package installed, you can import and use the icons in your Angular project. Here's a basic example:

import { IconModule } from '@coreui/icons-angular';
import { cidAccessible } from '@coreui/icons-pro';

// In your component template:
<svg [cIcon]="icons.cidAccessible"></svg>