1. Register the content element

Add the following in the `Configuration/TCA/Overrides/tt_content.php` file

// Adds the content element to the "Type" dropdown
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
'tt_content',
'CType',
    [
        'LLL:EXT:webtemplate/Resources/Private/Language/tca.xlf:tx_webtemplate_custom_content.title',
        'custom_content',
        'webtemplate-custom-content',
    ],
    'textmedia',
    'after'
);

Add the text to `tca.xlf` file with `tx_webtemplate_custom_content.title` as id attribute. Similarly, add the icon file named `webtemplate-custom-content.svg` to `Resources/Public/Icons/` folder.

2. Add the content element to "New Content Element Wizard"

Create a new file in the folder `Configuration/TSConfig/Page/Mod/Wizards/NewContentElement/` named `CustomContent.tsconfig` and add the following. Modify it according to your requirements.

mod.wizards.newContentElement.wizardItems {
// add the content element to the tab "common"
common {
    elements {
        custom_content {
            iconIdentifier = webtemplate-custom-content
            title = LLL:EXT:examples/Resources/Private/Language/locallang.xlf:tx_webtemplate_custom_content.title
            description = LLL:EXT:examples/Resources/Private/Language/locallang.xlf:tx_webtemplate_custom_content.description
            tt_content_defValues {
            CType = custom_content
            }
        }
    }
    show := addToList(custom_content)
    }
}

3. Register a new icon

Add the following configuration in `ext_localconf.php` and add SVG icon in `Resources/Public/Icons/` folder. You can also use the included icons from TYPO3. [See TYPO3 icons github page]

// webtemplate-pagecardswithfilter Icon
$iconRegistry->registerIcon(
    'webtemplate-custom-content',
    \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
    ['source' => 'EXT:webtemplate/Resources/Public/Icons/webtemplate-custom-content.svg']
);

Starting from TYPO3 11, you can use `Configuration/Icons.php` file to register the icon for your plugin. Create the Icon.php file in Configuration folder and add the following. Modify the file as per your requirement.

return [
    // icon identifier
    'webtemplate-custom-content' => [
        'provider' => \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
        'source' => 'EXT:bosstemplate/Resources/Public/Icons/webtemplate-custom-content.svg',
    ],
];

4. Configure the backend form

Put the following in `Configuration/TCA/Overrides/tt_content.php` and change `custom_content` to your content element name. Modify other text accordingly. Refer to the TYPO3's documentation for more information.

$GLOBALS['TCA']['tt_content']['types']['custom_content'] = [
    'showitem' => '
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
            --palette--;;general,
            --palette--;;headers,
            bodytext;LLL:EXT:core/Resources/Private/Language/locallang_tca.xlf:title,
        --div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance,
            --palette--;;frames,
            --palette--;;appearanceLinks,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:language,
            --palette--;;language,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access,
            --palette--;;hidden,
            --palette--;;access,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:categories,
            categories,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:notes,
            rowDescription,
        --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended,
    ',
    'columnsOverrides' => [
        'bodytext' => [
            'config' => [
                'enableRichtext' => false,
            ],
        ],
    ],
];

5. Configure the frontend rendering

In `Configuration/TypoScript/setup.typoscript` file, add the following:

tt_content {
    custom_content =< lib.contentElement
    custom_content {
        templateName = CustomContentElement
    }
}

Add a fluid template named `CustomContentElement.html` in `Resources/Private/Templates/ContentElements/` folder. You can see one of the templates in the folder for reference.

Note: the content from the content element can be used in the template by the variable named `data`.*

[See the tutorial at TYPO3's Website]