
```jsx
import { CIcon } from '@coreui/icons-react'
// or
import CIcon from '@coreui/icons-react/src/CIcon'
```

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="cicon-class-name">
        <td className="text-primary fw-semibold">className<a href="#cicon-class-name" aria-label="CIcon className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the component.</p>
        </td>
      </tr>
      <tr id="cicon-content">
        <td className="text-primary fw-semibold">content<a href="#cicon-content" aria-label="CIcon content permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 3.0</span></td>
        <td>-</td>
        <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Use <code>{`icon={...}`}</code> instead of</p>
        </td>
      </tr>
      <tr id="cicon-custom-class-name">
        <td className="text-primary fw-semibold">customClassName<a href="#cicon-custom-class-name" aria-label="CIcon customClassName permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.</p>
        </td>
      </tr>
      <tr id="cicon-height">
        <td className="text-primary fw-semibold">height<a href="#cicon-height" aria-label="CIcon height permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The height attribute defines the vertical length of an icon.</p>
        </td>
      </tr>
      <tr id="cicon-icon">
        <td className="text-primary fw-semibold">icon<a href="#cicon-icon" aria-label="CIcon icon permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code>, <code>{`string[]`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Name of the icon placed in React object or SVG content.</p>
        </td>
      </tr>
      <tr id="cicon-name">
        <td className="text-primary fw-semibold">name<a href="#cicon-name" aria-label="CIcon name permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 3.0</span></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Use <code>{`icon="..."`}</code> instead of</p>
        </td>
      </tr>
      <tr id="cicon-size">
        <td className="text-primary fw-semibold">size<a href="#cicon-size" aria-label="CIcon size permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'custom'`}</code>, <code>{`'custom-size'`}</code>, <code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code>, <code>{`'3xl'`}</code>, <code>{`'4xl'`}</code>, <code>{`'5xl'`}</code>, <code>{`'6xl'`}</code>, <code>{`'7xl'`}</code>, <code>{`'8xl'`}</code>, <code>{`'9xl'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.</p>
        </td>
      </tr>
      <tr id="cicon-title">
        <td className="text-primary fw-semibold">title<a href="#cicon-title" aria-label="CIcon title permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Title tag content.</p>
        </td>
      </tr>
      <tr id="cicon-use">
        <td className="text-primary fw-semibold">use<a href="#cicon-use" aria-label="CIcon use permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>If defined component will be rendered using 'use' tag.</p>
        </td>
      </tr>
      <tr id="cicon-view-box">
        <td className="text-primary fw-semibold">viewBox<a href="#cicon-view-box" aria-label="CIcon viewBox permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The viewBox attribute defines the position and dimension of an SVG viewport.</p>
        </td>
      </tr>
      <tr id="cicon-width">
        <td className="text-primary fw-semibold">width<a href="#cicon-width" aria-label="CIcon width permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The width attribute defines the horizontal length of an icon.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
